删除表列之间的空间

时间:2014-05-04 12:19:53

标签: html css jsp

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

<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>

enter image description here

有人会知道如何做到这一点吗?

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

感谢您的帮助!

2 个答案:

答案 0 :(得分:1)

你的桌子宽度为1000px,你有&#34;开始日期&#34;和&#34;结束日期&#34;跨越3列。因此,删除表格宽度<table style="width:1000px" style="text-align:center">或其他快速修复方法是将td宽度设置为较小的值,例如td {width: 10px;}

答案 1 :(得分:0)

  • 删除表格的固定宽度(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