表格单元格文字换行留下空白

Question

我在下面的JS小提琴中看到了HTML表的问题：

https://jsfiddle.net/y60jequo/17/

有问题的HTML也在这里：

 td {

    padding: 2px 10px 2px 2.0em;
    text-indent: -1.8em;

}

<table style="width:600px">
<tbody><tr>
<td>
<label><input value="3" type="checkbox"> 1</label>
</td>
<td>
<label><input value="12" type="checkbox"> 7</label>
</td>
<td>
<label><input value="24" type="checkbox"> Option2</label>
</td>
<td>
<label><input value="40" type="checkbox"> value.2018b</label>
</td>
<td>
<label><input value="27" type="checkbox"> S.2016</label>
</td>
</tr>
<tr>
<td>
<label><input value="4" type="checkbox"> 2</label>
</td>
<td>
<label><input value="20" type="checkbox"> Check-In Partnership</label>
</td>
<td>
<label><input value="28" type="checkbox"> Option3</label>
</td>
<td>
<label><input value="15" type="checkbox"> S.2011</label>
</td>
<td>
<label><input value="31" type="checkbox"> S.2017</label>
</td>
</tr>
<tr>
<td>
<label><input value="5" type="checkbox"> 3</label>
</td>
<td>
<label><input value="42" type="checkbox"> FERC_IFS</label>
</td>
<td>
<label><input value="33" type="checkbox"> value.2016b</label>
</td>
<td>
<label><input value="16" type="checkbox"> S.2012</label>
</td>
<td>
<label><input value="39" type="checkbox"> S.2018</label>
</td>
</tr>
<tr>
<td>
<label><input value="6" type="checkbox"> 4</label>
</td>
<td>
<label><input value="25" type="checkbox"> Equity.2015</label>
</td>
<td>
<label><input value="32" type="checkbox"> value.2017a</label>
</td>
<td>
<label><input value="17" type="checkbox"> S.2013</label>
</td>
<td>
<label><input value="35" type="checkbox"> S.District</label>
</td>
</tr>
<tr>
<td>
<label><input value="10" type="checkbox"> 5</label>
</td>
<td>
<label><input value="30" type="checkbox"> Equity.2016</label>
</td>
<td>
<label><input value="41" type="checkbox">value.2017b</label>
</td>
<td>
<label><input value="19" type="checkbox"> S.2014</label>
</td>
<td>
<label><input value="21" type="checkbox"> SCTG.S.2015</label>
</td>
</tr>
<tr>
<td>
<label><input value="11" type="checkbox"> 6</label>
</td>
<td>
<label><input value="23" type="checkbox"> PARS</label>
</td>
<td>
<label><input value="37" type="checkbox">value.2018a</label>
</td>
<td>
<label><input value="22" type="checkbox"> S.2015</label>
</td>
<td>
<label><input value="26" type="checkbox"> SCTG.S.2016</label>
</td>
</tr>
</tbody></table>

<div style="padding-left:160px;padding-top:10px">
 |&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| 
 how do I collapse this whitepace?
</div
</div>

您会注意到，“ Check-In Partnership”单元格值将其文本包装在表格单元格中。这样做会在该列与第三列之间留出空白区域。我应该使用什么CSS来折叠空白区域？

Answer 1

在CSS中，您应将填充padding: 2px 10px 2px 10em;更改为例如padding: 2px 10px 2px 10px;