Почему некоторые мои свойства 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.