假设我有一张 table
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Order Dat</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cakes</td>
<td>100 $</td>
<td>2015-01-09</td>
</tr>
<tr>
<td>Clouthing for Sping</td>
<td>20000 $</td>
<td>2015-02-09</td>
</tr>
</tbody>
</table>
我希望我的第二列(价格)与其标题长度或其列中最长的内容长度完全相同。我不希望第二列有浏览器添加到该列的“不可见空白”,以使表格变宽。
我已经尝试过的:
设置默认 % 或 px 宽度。这不适合我,因为我不知道我的数据会保留多久。
将表格宽度设置为不是 100%。这就是导致表格拉伸(stretch)并将这些“空白”添加到我的列的原因。问题是我需要我的表是 100%,我只希望我的一个列不要被拉伸(stretch)。
附言我也在使用 Bootstrap 。 (不知道有没有帮助)
编辑:
图片:
最佳答案
您需要将您希望额外宽度进入的列设置为 100%。这实际上不会使它成为真正的 100%,它只会迫使它尽可能大。这将使其他列换行以满足需要,因此请确保将空白属性设置为不换行。
CSS
.table {
width:100%;
white-space: nowrap;
}
.nameCol {
width:100%;
}
.table td {
padding: 0 5px;
}
HTML
<table class="table">
<thead>
<tr>
<th class="nameCol">Name</th>
<th>Price</th>
<th>Order Dat</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cakes</td>
<td>100 $</td>
<td>2015-01-09</td>
</tr>
<tr>
<td>Clouthing for Sping</td>
<td>20000 $</td>
<td>2015-02-09</td>
</tr>
</tbody>
</table>
Fiddle 查看实际效果:https://jsfiddle.net/q16dp8ja/1/
附加说明,为了便于阅读,我还添加了一些左右填充,因为现在右侧的列会变窄,而且您应该选择与 .table
不同的类,因为它很容易混淆使用 table
元素选择器。
关于html - 表格列宽等于内容宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33235309/