jquery - 奇怪的表格布局 :fixed; "bug" on 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 一样 - 并且然后它也扭曲了 table 。所以它与时间相关 - 也许 WebKit 正在做一些有趣的事情来优化渲染。

编辑

好吧，我有一个理论；)

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

如果创建了表格，并对其应用了 css(即因为控件已通过 ajax 或 setTimeout 等返回到浏览器)，当它没有宽度时，则固定布局无效。随后添加元素甚至设置宽度 都不会导致重新评估 css。