Как я могу заморозить THEAD только с помощью CSS?

Я пытаюсь заморозить раздел THEAD моей таблицы, чтобы при прокрутке, THEAD всегда отображается. Я выполнил это, присоединив обработчик события к событию scroll в jQuery, который устанавливает top позицию THEAD в сдвиг прокрутки:

$(".scroll").scroll(function () {
 $("#header thead").css({"top": ($(".scroll").scrollTop()) + "px"});
});

Вы можете увидеть это в действии на FIDDLE

1 ответ

Самое уродливое альтернативное решение, по крайней мере, не js и поддерживается большинством браузеров (нет css3). Jsfiddle в основном это duplicate таблица, установите 1-й заголовок таблицы, только видимый поверх 2-й таблицы. Недостатком является то, что он использует фиксированное положение, он не будет прокручиваться по горизонтали, как это делала таблица. Возможно, если вы установите ширину таблицы так же, как и ширину окна, она должна работать правильно. Просто альтернатива

licensed under cc by-sa 3.0 with attribution.