爲什麼我的一些CSS屬性滾動，但其他屬性保持固定？

Question

我有一些奇怪的（對我）的行爲。我使用這個tableHeadFixer jQuery插件來創建一個表格，該表格具有固定的表頭可滾動的表頭。

我有一個CSS類名爲table和它的設置，像這樣：

.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> a border，您可以觀察到這個小竅門。

如果您確實需要該邊框，則應使用放置在您的<th> s內的元素從段中進行組合。