这是一个假设的示例:
table, thead, tbody, tr { width: 100%; }
table { table-layout: fixed }
table > thead > tr > th { width: auto; }
<table>
<thead>
<tr>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
<th class="absorbing-column">Column D</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data A.1 lorem</td>
<td>Data B.1 ip</td>
<td>Data C.1 sum l</td>
<td>Data D.1</td>
</tr>
<tr>
<td>Data A.2 ipsum</td>
<td>Data B.2 lorem</td>
<td>Data C.2 some data</td>
<td>Data D.2 a long line of text that is long</td>
</tr>
<tr>
<td>Data A.3</td>
<td>Data B.3</td>
<td>Data C.3</td>
<td>Data D.3</td>
</tr>
</tbody>
</table>
我想让每一列的宽度都适合其内容的大小,并为“column-column”类保留一列的其余空间,使其看起来像这样:
| HTML | 100%
| body | 100%
| table | 100%
|------------------------------------------------------------------------|
| Column A | Column B | Column C | Column D |
|------------------------------------------------------------------------|
| Column A | Column B lorem | Column C | Column D |
| Column A | Column B | Column C | Column D |
| Column A | Column B | Column C | Column D |
|------------------------------------------------------------------------|
您会看到,由于第一行中有额外的数据,列B比其余的要大一些,但是列D总是会用完剩余的空间。
我玩过max-width,min-width,auto等,却不知道该如何做。
换句话说,我希望所有列都采用所需的宽度而不是更多,然后我希望D列用完100%宽度表中的所有剩余空间。
最佳答案
定义。吸收柱的宽度
将table-layout
设置为auto
并在.absorbing-column
上定义一个极限宽度。
在这里,我已将width
设置为100%
,因为它确保此列将占用最大的空间量,而没有定义宽度的列将减少以适应其内容,并且不再容纳更多内容。
这是表行为的古怪优点之一。 table-layout: auto
算法在数学上是可以原谅的。
您甚至可以选择在所有min-width
元素上定义一个td
,以防止它们变得太窄并且表将表现良好。
table {
table-layout: auto;
border-collapse: collapse;
width: 100%;
}
table td {
border: 1px solid #ccc;
}
table .absorbing-column {
width: 100%;
}
<table>
<thead>
<tr>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
<th class="absorbing-column">Column D</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data A.1 lorem</td>
<td>Data B.1 ip</td>
<td>Data C.1 sum l</td>
<td>Data D.1</td>
</tr>
<tr>
<td>Data A.2 ipsum</td>
<td>Data B.2 lorem</td>
<td>Data C.2 some data</td>
<td>Data D.2 a long line of text that is long</td>
</tr>
<tr>
<td>Data A.3</td>
<td>Data B.3</td>
<td>Data C.3</td>
<td>Data D.3</td>
</tr>
</tbody>
</table>
关于html - 如何在HTML表格中获取<td>以适合内容,并让特定的<td>填写其余内容,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26915087/