我在Code Review中提出了这个问题，因为它是在那里发现的主题
我试图实现固定表列。我发现了一个非常简单的纯CSS实现，这是我以前从未见过的。 Here you can check out修复第一列的小提琴。我已经在最新的IE和Chrome中测试了它。
由于我在深度浏览器呈现和浏览器兼容性方面不是专家，我有两个主要问题：
为什么它真的有效？听起来很奇怪，但我真的不明白。根据我的最佳知识，使用absolute定位不应该相对于滚动父级修复它，而是相对于它的偏移父级，即tr元素。所以实际上我很惊讶它有效。
安全吗？它是否应该在不同的浏览器中运行？这听起来好得令人难以置信。
此外，我想听听您对这一点和其他可能解决方案的想法和提示。我想避免的是将table拆分为两个并使用重叠来模仿固定列（例如许多数据表库）。
更新
有趣的是，relative元素甚至不需要tr定位才能正常工作。现在，我对它为何以及如何运作感到十分困惑。
答案 0 :(得分：1)
TR和位置：相对
绝对定位元素从流程中取出。通过为tbody提供填充，会创建一些空间来显示第一列。
它有效，因为第一列的宽度和填充是固定的（150px）。
然后有这个奇怪的规则：
table > tbody > tr {
position: relative;
}
从现在开始，我们称之为 规则R 。 ; - ）
您对偏移父项的评论，即tr，听起来是正确的。
但是，according to the specs，position: relative对表格行的行为未定义＆＃39;，因此可能会出现问题。
在Chrome中，似乎忽略了整个规则，如果我删除规则R ，则小提琴仍然可以正常工作。
所以＆＃39;解释＆＃39;它为何有效。 规则R 会破坏它，但它不会因为它被忽略（至少是Chrome）。
为什么top有效
由于没有定位元素，因此单元格会响应文档正文，这就解释了为什么它不会随着div的内容移动。
绝对定位会使元素保持在原始（静态）位置also according to standards。通过CSS（仅），left更改为0.
因此，元素位于身体的左侧（看起来是固定的），如果它已经在流动中那么它应该具有的顶部，这样就可以了tr内的正常顶部位置。那里没有奇怪。
FWIW，请参阅updated fiddle，其中包含一些内容，显示整个div内容正在移动，但不是第一列，也不是.container以外的正文内容。
<强>风险
有风险吗？ 我认为理论上不是，虽然这是一些奇怪的实现，可能会在某些浏览器中触发一些边缘案例错误。它似乎工作正常，如果你删除规则R 似乎也遵循标准。
补充说明 您不需要为表格指定任何宽度。你可以简单地让它只需要它所需的宽度。唯一需要具有固定宽度的是第一列。 所以，有点剥离，这里是your fiddle。