这是一个假设的例子：
<html>
<head>
...
<style>
html,body,table,thead,tbody,tr { width: 100%; }
table { table-layout: fixed }
table > thead > tr > th { width: auto; }
</style>
</head>
<body>
<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>
</body>
</html>
我想让每一列的宽度适合其内容大小，并留下其余的空格为“列列”吸收列，使其看起来像这样：
| 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列比其余部分大一些，但是Column D总是占用剩余空间。
我玩的是最大宽度，最小宽度，自动等等，无法弄清楚如何使这项工作。
换句话说，我希望所有的列可以采取任何需要的宽度，而不是更多，然后我想要列D使用100％宽度表中的所有剩余空间。
解决方法
定义.absorbing-column的宽度
将表格布局设置为自动，并在.absorbing-column上定义极限宽度。
这里我将宽度设置为100％，因为它确保此列将占用最大允许的空间，而没有定义宽度的列将减少以适应其内容，而不会进一步。
这是表格行为的奇怪的好处之一。表布局：自动算法在数学上是宽容的。
您甚至可以选择在所有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>
原文地址：https://www.jb51.cc/html/233053.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
