如何获取<；td>；在HTML表格中调整内容，并让特定的<；td>；补上剩下的

这是一个假设的例子：

table，thead，tbody，tr{width:100%；}
表{表布局：固定}
table>thead>tr>th{width:auto；}

A列
B栏
C列
D列
数据A.1洛雷姆
数据B.1 ip
数据C.1和l
数据D.1
数据A.2国际公共部门会计准则
数据B.2洛雷姆
数据C.2一些数据
数据D.2一行很长的文本
数据A.3
数据B.3
数据C.3
数据D.3

定义吸收柱的宽度 将

表格布局

设置为

自动

，并在

吸收列

上定义一个极限宽度

在这里，我将

宽度设置为
100%
，因为它可以确保此列占用允许的最大空间量，而没有定义宽度的列将缩小以适应其内容，并且不会进一步缩小

这是表格行为的一个奇怪的好处。
表格布局：auto
算法在数学上是宽容的

您甚至可以选择在所有
td
元素上定义
min-width
，以防止它们变得太窄，从而使表格运行良好


表格{
表格布局：自动；
边界塌陷：塌陷；
宽度：100%；
}
表td{
边框：1px实心#ccc；
}
表2.吸收柱{
宽度：100%；
}

A列
B栏
C列
D列
数据A.1洛雷姆
数据B.1 ip
数据C.1和l
数据D.1
数据A.2国际公共部门会计准则
数据B.2洛雷姆
数据C.2一些数据
数据D.2一行很长的文本
数据A.3
数据B.3
数据C.3
数据D.3
演示-

添加边框以获得更好的视图（测试）

更多关于


表格{
宽度：100%；
}
表td{
空白：nowrap；
}
表td：最后一个孩子{
宽度：100%；
}

A列
B栏
C列
D列
数据A.1洛雷姆
数据B.1 ip
数据C.1和l
数据D.1
数据A.2国际公共部门会计准则
数据B.2洛雷姆
数据C.2一些数据
数据D.2一行很长的文本
数据A.3
数据B.3
数据C.3
数据D.3
根据我能找到的所有规范，将CSS宽度设置为元素的1%或100%，与父元素相关。尽管在撰写本文时，Blink渲染引擎（Chrome）和Gecko（Firefox）似乎能够很好地处理1%或100%（使列缩小或列填充可用空间），但根据我能找到的所有CSS规范，并不能保证能够正确渲染

一个选项是用CSS4 flex Div替换表格：


适用于新浏览器，如IE11+请参阅本文底部的表格。
使用溢出：

overflow: visible;

如果“吸收列”不在末尾，这会起作用吗（当然，我的意思是不使用：last child，我可以使用一个类并且它会影响任何相同的列）？是，但您需要为所有最后一个孩子添加
。吸收列
@user2985898@user2985898-看起来您可以使用第n个子项指定列：如果文本比单元格宽，则会使表格比单元格宽container@DanV要解决表格比其容器宽的问题，只需添加“空白：首字母；”“吸收栏”类不适用于“th”？@naturalborncaper Good catch。我已经更新了我的示例，将类仅应用于
th
，就像OP的代码片段一样，并且修改了CSS以匹配。但效果是一样的，因为正如我指出的，表布局算法是宽容的。即使应用于列中的一个单元格的宽度，如果没有被更具特异性的规则覆盖，将导致宽度应用于列中的所有单元格。如果两个或多个具有相同特性的规则将不同的宽度应用于不同的单元格，则使用最大宽度来布局该列（在Chrome中似乎是这样）。在我的实验中，这个答案并不阻止第一列内容被包装。在我看来，@Vitorino-Fernandes的答案更有效。这是一个很好的观察。我的答案中没有包含
空白：nowrap
规则，因为这可能导致表溢出其容器，这是不可取的，但我应该直接解释一下。我确实提到了
min width
可以用于
td
元素，这可以实现类似的效果，但它没有直接满足OPs要求。我也喜欢@Vitorino fernandes的回答。不过，也可以通过在
表td:last child
上重置
空白：normal
来改进，以帮助避免容器溢出。表布局：在我的情况下，实际上自动工作
overflow: visible;