javascript - 如何在 IE6/7 中防止表格“弯曲”

Question

我有一些具有“查看详细信息”功能的表格数据，这些数据会触发 ajax 调用以将一些新元素附加到 DOM（通常我在所选行和 innerHTML 之后插入另一个 TR 或使用 colspan 附加到 TD 内。

我的问题是，在 IE6/7 中我的列 flex。目前我没有每列的“静态”宽度，并希望尽可能避免这种情况。

有什么建议可以避免这种“弯曲”吗？

Answer 1

这里的这个技巧是使用有点深奥的table-layout:fixed规则

像这样使用它：

table {table-layout:fixed}

您还应该为<td>s 指定明确的列宽。

规则说“这个表格的table-layout:fixed单元格宽度取决于我所说的，而不是单元格中的实际内容”。这通常很有用，因为浏览器可以在收到第一个<tr>. 否则，浏览器必须先接收整个表格，然后才能计算列宽。但是，在您的情况下，保持绝对列宽也很有用。

Answer 2

表格根据内容动态调整大小。这就是他们的本性。在呈现表格时，您总是可以读取表格的“自然”列宽，然后在调用 Ajax 之前应用一种样式来锁定该形状。

Answer 3

当您说 flex 时，您的意思是调整大小吗？请记住，如果您要更改 DOM 中的任何内容并重新绘制，其行为将类似于它首次将项目呈现到页面时。我在表格中看到的最好结果是清除它们的容器，构建表格然后将其附加到容器中。

如果您因为没有通过类、样式或属性声明静态宽度而谈论列调整自己的大小 - 那么列将根据其内容调整自己的大小。