删除表格列之间的空间答案

【问题标题】：Remove space between table columns删除表格列之间的空间
【发布时间】：2014-05-04 12:19:52
【问题描述】：

我需要删除下表中日/月/年列之间的空格。

<form action='goServlet' method='POST'>  
    <table style="width:1000px" style="text-align:center">
        <tr style="text-align:center">
            <th>City</th>
            <th>Room Type</th>
            <th colspan="3">Start Date</th>
            <th colspan="3">End Date</th>
            <th>Discount %</th>                     
        </tr>
        <c:forEach var="item" items="${discountInfo}">
            <tr style="text-align:center">
                <td>${item.hotelLocation}</td>
                 <td>${item.roomType}</td>
                 <td><select>
                        <option value="01">01</option>
                        <option value="02">02</option>
                        <option value="03">03</option>
                        <option value="04">04</option>
                        <option value="05">05</option>
                        <option value="06">06</option>
                        <option value="07">07</option>
                        <option value="08">08</option>
                        <option value="09">09</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>
                 </select></td>
                 <td><select>
                        <option value="01">January</option>
                        <option value="02">February</option>
                        <option value="03">March</option>
                        <option value="04">April</option>
                        <option value="05">May</option>
                        <option value="06">June</option>
                        <option value="07">July</option>
                        <option value="08">August</option>
                        <option value="09">September</option>
                        <option value="10">October</option>
                        <option value="11">November</option>
                        <option value="12">December</option>
                </select></td>
                 <td><select>
                        <option value="2014">2014</option>
                        <option value="2015">2015</option>
                        <option value="2016">2016</option>
                        <option value="2017">2017</option>
                        <option value="2018">2018</option>
                        <option value="2019">2019</option>                         
                </select></td>
                <td><select>
                        <option value="01">01</option>
                        <option value="02">02</option>
                        <option value="03">03</option>
                        <option value="04">04</option>
                        <option value="05">05</option>
                        <option value="06">06</option>
                        <option value="07">07</option>
                        <option value="08">08</option>
                        <option value="09">09</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>
                 </select></td>
                 <td><select>
                        <option value="01">January</option>
                        <option value="02">February</option>
                        <option value="03">March</option>
                        <option value="04">April</option>
                        <option value="05">May</option>
                        <option value="06">June</option>
                        <option value="07">July</option>
                        <option value="08">August</option>
                        <option value="09">September</option>
                        <option value="10">October</option>
                        <option value="11">November</option>
                        <option value="12">December</option>
                </select></td>
                 <td><select>
                        <option value="2014">2014</option>
                        <option value="2015">2015</option>
                        <option value="2016">2016</option>
                        <option value="2017">2017</option>
                        <option value="2018">2018</option>
                        <option value="2019">2019</option>                         
                </select></td>
                <td>50</td>
            </tr>
        </c:forEach>
    </table>        

</form>

有人知道我该怎么做吗？

我尝试在<table> 中使用cellpadding="0" cellspacing="0" 和border-collapse:collapse，但没有任何改变。

感谢您的帮助！

【问题讨论】：

标签： html css jsp

【解决方案1】：

您制作的表格宽度为 1000 像素，并且“开始日期”和“结束日期”跨越 3 列。因此，要么删除表格宽度<table style="width:1000px" style="text-align:center">，要么另一个快速解决方法是将 td 宽度设置为一个较小的值，例如 td {width: 10px;}

【讨论】：

【解决方案2】：

移除表格的固定宽度 (width = 1000px)。这在较小的屏幕上会出现问题，并且是列之间的空间的原因。
您有一些包含多个列的字段（日期类型的字段包含 3 列，分别代表日、月和年）。向字段的第一个单元格添加一个类，以便您可以为其设置填充，以便在视觉上将其与其他字段分开：

<tr>
    <th>City</th>
    <th>Room Type</th>
    <th colspan="3">Start Date</th>
    <th colspan="3">End Date</th>
    <th>Discount %</th>                     
</tr>
<tr>
    <td class="firstTDInField">Sidney</td>
    <td class="firstTDInField">Single</td>
    <td class="firstTDInField"><select>
        <option value="01">01</option>
        ...
        <option value="31">31</option>
        </select></td>
    <td><select>
        <option value="01">January</option>
        ...
        <option value="12">December</option>
        </select></td>
    <td><select>
        <option value="2014">2014</option>
        ...
        <option value="2019">2019</option>                         
        </select></td>
    <td class="firstTDInField"><select>
        <option value="01">01</option>
        ...
        <option value="31">31</option>
        </select></td>
    <td><select>
        <option value="01">January</option>
        ...
        <option value="12">December</option>
        </select></td>
    <td><select>
        <option value="2014">2014</option>
        ...
        <option value="2019">2019</option>                         
        </select></td>
    <td class="firstTDInField">50</td>
</tr>

th {
    text-align:left;
}

th, td.firstTDInField {
    padding-left: 20px;
}

见fiddle

【讨论】：