奇怪的表格布局：固定； WebKit 上的“错误”

Question

我正在为我自己的需要构建网格组件，其中包含可排序的列、行等。现有的要么不适合我的需求，要么太重。当 WebKit 出乎意料地遇到无法解释的异常时，我刚开始使用可调整大小的列。虽然 table-layout:fixed; 在所有其他浏览器（甚至 IE）上都能完美运行 Safari/Chrome 让我头疼。

这是我目前写的：TSort Embriyo

如您所见，它创建了两张表——一张用于标题，一张用于正文，还有一些围绕它们的包装器。然后它尝试使用 table-layout:fixed，因为它更适合动态网格概念。对于 table-layout:fixed，表格的宽度至关重要，此外我的所有单元格 (td/th) 都有 overflow:hidden, white-space:nowrap 和 text-overflow:ellipsis 以更好地模拟网格外观。

现在“错误” - 两个表格的构造方式相同，单元格和表格的宽度由相同的函数计算和设置。 “错误”是无法解释的，因为我使用的方法在顶部表中按预期工作，但在底部表中失败。基本上它就像我没有分配宽度一样。但是你可以在 Web Inspector 中看到它肯定有宽度……所以……嗯？

我尝试了一切，我交换了函数，我移除了顶层表，我尝试按照我构建顶层表的方式构建底层表。但它总是失败。但是，当我直接将生成的表格代码复制/粘贴到页面中时，它开始工作。所以我的猜测是它具有表格的动态特性。但是为什么它在顶级桌子上起作用呢？

通过创建具有预分配宽度的表格元素，我能够摆脱这个“错误”。但这并不能解释奇怪的行为，不是吗？

Answer 1

我找到了解决办法 - 仍然不确定到底发生了什么。

移动：

self._addColElements(self.bd);

到您的construct 函数的底部（当然也可以从populate 中删除它）。

您可能已经注意到，在我的previous test 中，我添加了一个“数据”选项。我发现使用该数据从_init 调用populate 工作正常——除非我使用setTimeout 来延迟调用——就像ajax get 那样——然后它也扭曲了表格。所以它与时间有关——也许 WebKit 正在做一些有趣的事情来优化渲染。

编辑

好的，我有一个理论；）

当创建表并在同一个函数中添加所有行时，css 将在函数调用结束时应用 - 此时 table-layout:fixed 项将仅在表具有宽度时应用。

如果表格被创建，并且css被应用到它上面（即因为控制已经通过例如ajax或setTimeout返回给浏览器），当它没有宽度时，那么固定布局没有效果.随后添加项目甚至设置宽度都不会导致重新评估css。