реализация таблицы фиксированного заголовка с помощью прокручиваемого контента

В этой статье мы рассмотрим задачу создания таблицы с фиксированным заголовком и прокрутите Тело с использованием начальной загрузки 3. Изученные решения направлены на сохранение эстетики начальной загрузки без компрометирования функциональности.

Challenge

обычная таблица Bootstrap, как показано в приведенном примере, Представляет проблемы с установкой высоты для корпуса стола. Несмотря на установление высоты до 10px, результат остается неизменным. Этот вопрос требует альтернативного подхода.

фиксированный заголовок с липким позиционированием

простое, но эффективное решение включает в себя использование липкого позиционирования CSS. Этот подход включает в себя назначение позиции: липкий; Верх: 0; к элементам заголовка таблицы (TH), гарантируя, что они остаются фиксированными в верхней части таблицы. Вот разбивка реализации:

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

этот подход работает эффективно в современных браузерах, таких как Chrome, Firefox и Edge.