删除表列之间的空间
我需要删除下表中日/月/年列之间的空格。
<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>
有人会知道如何做到这一点吗？
我尝试在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
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？