表行具有不同的输入长度

时间:2017-08-15 15:25:46

标签: html css

我正在尝试布局一个表格(我知道网格可能效果更好但不想第三次更改所有内容)。我有2个相同的单元格,但是一个小于另一个。无论我做什么,无论我创建一个较小的类,还是使它们相等,总是会比另一个更大



.grid td.normal{
    width: 100px;
}
.grid td.small{
    width: 50px;
}

<tr>
            <!--Section Search-->
            <td colspan="1" class="normal">
                <div class="form-row">
                    <form name="r" action="section.php" method="get" class="form-labels-on-toptabletry">
                        <label><span>Section:</span><br></label>
                        <select name="section">
                            <option value="">Select</option>
                            <option value="0">Unknown</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value=8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            <option value="30">30</option>
                            <option value="31">31</option>
                            <option value="32">32</option>
                            <option value="33">33</option>
                            <option value="34">34</option>
                            <option value="35">35</option>
                            <option value="36">36</option>
                        </select><br>
                        <input type="submit" value="Search" class="form-buttons">
                    </form>
                </div>
            </td>
            <!--Township Search-->
            <td colspan="1" class="normal">
                <form name="township" action="township.php" method="get" class="form-labels-on-toptabletry">
                        <label><span>Township:</span><br>
                        <input type="text" name="township"><br>
                        <input type="submit" value="Search" class="form-buttons">
                        </label>
                </form>
            </td>
            <!--TD Search-->
            <td colspan="1" class="normal">
                <div class="form-row">
                    <form name="r" action="td.php" method="get" class="form-labels-on-toptabletry">
                        <label>
                            <span>Township Direction:</span><br>
                            <select name="td">
                                <option value="">Select</option>
                                <option value="0">Unknown</option>
                                <option value="N">North</option>
                                <option value="S">South</option>
                            </select><br>
                        </label>
                        <input type="submit" value="Search" class="form-buttons">
                    </form>
                </div>
            </td>
            <!--Range Search-->
            <td colspan="1" class="small">
                <form name="range" action="range.php" method="get" class="form-labels-on-toptabletry">
                        <label>
                            <span>Range:</span><br>
                            <input type="text" name="range"><br>
                            <input type="submit" value="Search" class="form-buttons">
                        </label>
                    </form>
            </td>
            <!--RD Search-->
            <td colspan="1" class="normal">
                <div class="form-row">
                    <form name="rd" action="rd.php" method="get" class="form-labels-on-toptabletry">
                        <label><span>Range Direction:</span><br>
                            <select name="rd">
                                <option value="">Select</option>
                                <option value="0">Unknown</option>
                                <option value="W">West</option>
                                <option value="E">East</option>
                            </select><br>
                        </label>
                        <input type="submit" value="Search" class="form-buttons">
                    </form>
                </div>
            </td>
        </tr>
&#13;
&#13;
&#13;

在片段上它看起来没问题,但这是我测试它时的样子: Different Size Inputs 有没有人知道为什么会发生这种情况?

0 个答案:

没有答案