私の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

実際にはすべてスクロールします。

しかし、あなたのプラグインは、scrollの要素に等しいthの要素にtopプロパティを追加しているので、静かに見えるようになります。

<thead>にborderを与えることにしたので、この小さなトリックを観察することができます。

本当にその境界線が必要な場合は、<th>内に配置された要素を使用してセグメントから構成する必要があります。