无论 td 内容如何，​​保持 HTML 表格可变宽度

Question

我有一个 html 表格，随着浏览器窗口被拖得越来越窄，表格越来越宽。此表中的每一行最初都包含汇总数据列，并且每一行都有一个图标，单击该图标将在汇总行正下方打开一个新的动态表行，我想在其中显示另一个包含详细信息的表。

我的问题是出现在每个动态添加的表行中的明细表非常宽。为了防止外部表变宽以容纳内部详细信息表，我添加了一个样式为 overflow-x:scroll; 的 div。在详细信息的 td 标签内；然而，虽然它增加了水平滚动条，但主表也变宽以容纳内部细节表。无论动态添加的行中放入什么内容，我都希望主表保持其宽度和布局。

我发现如果我把 table-layout: fixed;在外部表格标记上，该表格在出现时停止扩大以容纳内部详细信息表格，并且滚动工作正常，但它的缺点是使我的所有主表格的列都具有相同的宽度。

有没有人知道一种更好的方法来保持外部表格能够随着浏览器窗口增长和缩小，同时在显示宽的内部内容时阻止它变宽？

Answer 1

有两种解决方案。

1. table-layout: fixed 本质上不会使所有列的宽度相同。 您可以使用<col> 标签来指定列宽。问题是您不能在此方法中使用自动计算的列宽。

2. 将style='position: relative' 添加到外部表有问题的<td>。在其中添加<div style='position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: auto'> 作为内表的容器。您可以使用width 属性指定<td> 的宽度。