Jquery 怪异的桌子布局：固定&引用；臭虫“；关于WebKit

我正在为我自己的需要构建网格组件，包括可排序的列、行等。现有的网格组件要么不适合我的需要，要么太重。当realy出乎意料地WebKit出现无法解释的异常时，我刚开始讨论可调整大小的列。而表格布局：固定在所有其他浏览器（甚至IE）上都能完美运行。Safari/Chrome让我头疼

以下是我到目前为止写的内容：

正如您所见，它创建了两个表——一个用于标题，另一个用于正文和它们周围的一些包装。然后它尝试使用表布局：固定，因为它更适合动态网格的概念。对于表格布局：修复了表格必须有宽度的问题，此外，所有我的单元格（td/th）都有溢出：隐藏、空白：nowrap和文本溢出：省略号，以便更好地模拟网格外观

现在这个“bug”-两个表的构造方式相同，单元格和表的宽度由相同的函数计算和设置。这个“错误”是无法解释的，因为我使用的方法对顶部表格的效果和预期的一样，但对底部表格的效果不好。基本上，它的行为就像我没有为它指定宽度一样。但是你可以在Web Inspector中看到，它肯定有宽度。。。所以嗯

我尝试了一切，我交换了函数，我移除了上表，我试图用构建上表的方式构建下表。但它一直在失败。但是，当我直接将生成的表代码复制/粘贴到页面中时，它就开始工作了。所以我猜这里有一个表的动力学性质。但是为什么它能在桌面上工作呢

---

我可以通过创建具有预先指定宽度的表元素来消除这个“bug”。但这并不能解释这种奇怪的行为，是吗？

我找到了一个解决办法——仍然不确定到底发生了什么

移动：

到

构造

函数的底部（当然要从

填充

中删除它）

您可能已经注意到，在我的示例中，我添加了一个“数据”选项。我发现从

\u init

使用该数据调用

填充
效果很好-除非我使用
setTimeout
延迟调用-就像ajax get一样-然后它也扭曲了表。所以它与时间有关——也许WebKit正在做一些有趣的事情来优化渲染

编辑

好的，我有一个理论；）

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

如果创建了该表，并将css应用于该表（即，因为控件已通过ajax或
setTimeout
）返回到浏览器），但该表没有宽度，则固定布局无效。随后添加项目，甚至设置宽度都不会导致重新评估css。
FYI，即使在
setTimeout
调用中延迟“0”，问题仍然存在。另一个选项是延迟创建第二个表，直到填充它为止-这里有一个惊喜。。。你的研究真的做得很好！现在我想情况就是这样，虽然我觉得这在WebKit中可能不应该做，因为这不是人们通常期望的。虽然拖延往往能解决问题，但我尝试使用这种方法作为最后手段：）我在想我还能做什么。。。然后我想到在ajax响应之前我知道列宽，所以实际上没有什么能阻止我在将表放入DOM之前计算表的宽度。我的更新代码将在这里保留一段时间（我将第一个案例移到了不同的地方）：@jayarjo-上面的第一个建议就是这样。通过在
construct
末尾调用body表的_addColElements，可以在ajax调用返回之前添加列大小并设置表的宽度。
self._addColElements(self.bd);