jquery - 为什么我的某些 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属性(property)给th元素等于 scroll 的数量，让他们看起来像是站着不动。

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

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