为什么我的一些CSS属性会滚动但其他属性会保持不变？

Question

我有一些奇怪的（对我而言）行为。我正在使用这个tableHeadFixer jQuery插件来创建一个表，它有一个固定的标题，表体可以滚动。

我有一个名为table的CSS类，它的设置如下：

.table thead  {
    color: blue;
    border: 4px solid red;
}

.table thead tr {
  background-color: grey;
}

我的问题是，当我滚动表格时，border属性会随之滚动，但其余的属性会保持不变。我很困惑如何/为什么会发生这种情况以及我需要做些什么来解决它。

我做了fiddle来证明这一点。

请注意，当您滚动红色border滚动时。

现在我正在使用 jQuery / Bootstrap / tableHeadFixer 。

Answer 1

他们实际上都是滚动的。

但是您的插件正在为top元素添加th属性，其等级为scroll，使它们看起来像是静止不动。

因为您决定给<thead> border，所以您可以观察到这个小技巧。

如果你真的想要那个边框，你应该使用放置在<th>内的元素从段中组合它。