在Safari中调整表格布局：固定表的大小？

Question

这是CodePen：https://codepen.io/neezer/pen/eWvLrm

1. 将该笔加载到Chrome中（我正在运行57.0.2987.133）。
2. 使用样式属性将<table>的宽度更改为150px。不要在代码中执行此操作（因为它会导致刷新 - 特定于CodePen而不是我的问题），而是通过控制台或Web检查器以编程方式更改它。

请注意Chrome如何调整表格大小并为td / th元素执行正确的溢出：



1. 在Safari中加载该笔（我正在运行10.1（12603.1.30.0.34））。
2. 使用样式属性将<table>的宽度更改为150px。不要在代码中执行此操作（因为它会导致刷新 - 特定于CodePen而不是我的问题），而是通过控制台或Web检查器以编程方式更改它。

请注意，Safari 不会 将表格调整为给定尺寸，因为td / th似乎没有缩小到小于他们的内容。



为什么会有所不同？我能想到的唯一解释是Safari不会重新考虑样式更改表，并考虑table-layout。我找到了this in the MDN docs：

  

在＆＃34;固定＆＃34;布局方法，整个表可以渲染一次   已下载并分析第一个表行。这可以加快速度   提升时间超过＆＃34;自动＆＃34;布局方法，但后续   单元格内容可能不适合所提供的列宽。 任何细胞   溢出的内容使用溢出属性来确定   是否剪切溢出内容，但仅限于表中有   已知宽度，否则它不会溢出细胞。

与我不同的是，Chrome在检测到<table>上的维度更改时重新评估了该表，但Safari没有，因此不会溢出单元格。

如果我确保<table>在初始渲染 上设置宽度 ，我就可以解决这个问题，但这是不行的对于我的应用程序，它允许用户动态调整表格尺寸。毋庸置疑，它在Chrome中运行良好，但不适用于Safari。

无论如何，Safari在这里表现得像Chrome一样吗？一些强制Safari进行重新评估的方法，如果这是实际发生的事情？  Firefox / IE / Edge遇到同样的问题吗？他们能从同样的解决方案中受益吗？

更新 ：Safari网络检查员的这个小实验似乎证实了我的理论：http://d.pr/v/bzhIH

Answer 1

您可以将<table>包裹在<div>中，将表格宽度设置为此<div>，将width: 100%;设置为<table>。

如果您希望延长<table>列内容宽度，则需要从width: 100%;替换<table>并将width: auto;设置为<div>。

以下是示例：https://codepen.io/Izumenko/pen/zaGGRM