html - 固定表列实现

Question

我把这个问题从 Code Review 移到了这里，因为在那里发现它离题了

我正在尝试实现固定的表格列。我找到了一个非常简单的纯 CSS 实现，这是我以前从未见过的。 Here you can check out固定第一列的 fiddle 。我只在最新的 IE 和 Chrome 中测试过它。

由于我不是深度浏览器渲染和浏览器兼容性方面的专家，所以我有两个主要问题:

1. 为什么它真的有效？ 听起来很奇怪，但我真的不明白。据我所知，使用 absolute 定位不应该相对于滚动父级固定它，而是相对于它的偏移父级，即 tr 元素。所以实际上我很惊讶它有效。

2. 它安全吗？它是否也可以在不同的浏览器和可能较旧的浏览器中工作？听起来好得令人难以置信。

此外，我还想听听您对这个解决方案和其他可能解决方案的想法和提示。我想避免的是将 table 分成两部分并使用重叠来模拟固定列(例如许多数据表库所做的)。

更新

有趣的是，似乎 relative 定位甚至不需要在 tr 元素上正常工作。现在我对它为什么以及如何工作完全感到困惑。

Answer 1

TR 和position:relative

绝对定位元素从流中取出。通过给 tbody 一个填充，创建一些空间来显示第一列。

它有效，因为第一列的宽度和填充是固定的(到 150 像素)。

然后就是这个奇怪的规则:

table > tbody > tr {
  position: relative;
}

从现在开始我们称它为Rule R。 ;-)

您关于偏移父项(即 tr)的评论听起来是正确的。然而，according to the specs ，表行上 position: relative 的行为是“未定义的”，因此这可能是个问题。

在 Chrome 中，整个规则似乎都被忽略了，如果我删除 Rule R， fiddle 仍然可以正常工作。

这样就“解释”了它为什么有效。 Rule R 会破坏它，但它不会，因为它只是被忽略了(至少被 Chrome 忽略了)。

为什么 top 有效

由于没有定位元素，单元格响应文档主体，这就解释了为什么它不随 div 的内容移动。

绝对定位会将元素留在其原始(静态)位置，also according to standards .通过 CSS(仅)将 left 更改为 0。

因此，该元素位于主体的左侧(看起来“固定”)，如果它在流中，它本来应该位于的顶部，所以这是它在 tr 中的正常顶部位置。没有什么奇怪的。

FWIW，参见 updated fiddle有一些内容，表明整个 div 内容都在移动，但不是第一列，也不是 .container 之外的正文内容。

风险

那么有风险吗？我认为理论上不会，尽管这是一种奇怪的实现方式，可能会在某些浏览器中触发一些边缘情况错误。它似乎工作正常，如果您删除 Rule R 似乎也遵循标准。

补充说明您不需要为表格指定任何宽度。你可以简单地让它调整到它需要的宽度。唯一需要固定宽度的是第一列。所以，稍微简化一下，这里是 your fiddle .