如何获取 HTML 表格中的 <td> 以适应内容，并让特定的 <td> 填充其余部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26915087/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the <td> in HTML tables to fit content, and let a specific <td> fill in the rest
提问by user2985898
This is a hypothetical example:
这是一个假设的例子：
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>I want to have every single column's width to fit its content size, and leave the rest of the space for the one column with the "absorbing-column" class, so that it looks like this:
我希望每一列的宽度都适合其内容大小，并将剩余的空间留给具有“吸收列”类的一列，使其看起来像这样：
| 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 |
|------------------------------------------------------------------------|
You see, Column B is a bit bigger than the rest due to the extra data in the first row, but Column D always uses up the remaining space.
您会看到，由于第一行中的额外数据，B 列比其他列大一点，但 D 列总是用完剩余空间。
I played around with max-width, min-width, auto, etc. and could not figure out how to make this work.
我玩过最大宽度、最小宽度、自动等，但不知道如何使这项工作有效。
In other words, I want all columns to take whatever width they need and not more, and then I want Column D to use up all of the remaining space inside the 100% width table.
换句话说，我希望所有列都采用他们需要的任何宽度而不是更多，然后我希望 D 列用完 100% 宽度表内的所有剩余空间。
回答by gfullam
Define width of .absorbing-column
定义 .absolute-column 的宽度
Set table-layoutto autoand define an extreme width on .absorbing-column.
设置table-layout为auto并在 上定义一个极端宽度.absorbing-column。
Here I have set the widthto 100%because it ensures that this column will take the maximum amount of space allowed, while the columns with no defined width will reduce to fit their content and no further.
在这里，我将 设置为width，100%因为它确保此列将占用允许的最大空间量，而未定义宽度的列将减少以适应其内容，而不会再增加。
This is one of the quirky benefits of how tables behave. The table-layout: autoalgorithm is mathematically forgiving.
这是表格行为的奇怪好处之一。该table-layout: auto算法在数学上是宽容的。
You may even choose to define a min-widthon all tdelements to prevent them from becoming too narrow and the table will behave nicely.
您甚至可以选择min-width在所有td元素上定义 a以防止它们变得太窄，并且表格将表现良好。
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>回答by Vitorino fernandes
demo - http://jsfiddle.net/victor_007/ywevz8ra/
演示 - http://jsfiddle.net/victor_007/ywevz8ra/
added border for better view (testing)
添加边框以获得更好的视图（测试）
more info about white-space
有关空白的更多信息
table{
width:100%;
}
table td{
white-space: nowrap; /** added **/
}
table td:last-child{
width:100%;
}
table {
width: 100%;
}
table td {
white-space: nowrap;
}
table td:last-child {
width: 100%;
}<table border="1">
<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>回答by Mladen Adamovic
Setting CSS width to 1% or 100% of an element according to all specs I could find out is related to the parent. Although Blink Rendering Engine (Chrome) and Gecko (Firefox) at the moment of writing seems to handle that 1% or 100% (make a columns shrink or a column to fill available space) well, it is not guaranteed according to all CSS specifications I could find to render it properly.
根据我能找到的所有规范将 CSS 宽度设置为元素的 1% 或 100% 与父元素有关。尽管在撰写本文时 Blink Rendering Engine (Chrome) 和 Gecko (Firefox) 似乎可以很好地处理 1% 或 100%（使列缩小或一列填充可用空间），但不能保证根据所有 CSS 规范我可以找到正确渲染它。
One option is to replace table with CSS4 flex divs:
一种选择是用 CSS4 flex div 替换 table：
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
That works in new browsers i.e. IE11+ see table at the bottom of the article.
这适用于新的浏览器，即 IE11+，请参阅文章底部的表格。
回答by Donnie Gallocanta Jr.
use overflow:
使用溢出：
overflow: visible;
