Фиксация заголовков таблицы при прокрутке в HTML

Быстрый ответ

Чтобы сделать прокручиваемую таблицу с неподвижной шапкой, следует использовать CSS-свойства. Вам нужно разместить таблицу в контейнере заданной высоты и использовать overflow-y: auto. Для <tbody> применяется display: block и указывается нужная высота, чтобы задать область прокрутки. Пример кода ниже:

<style>
  .fixed-header {
    height: 150px; /* Прописываем высоту контейнера */
    overflow-y: auto; /* Активируем прокрутку */
  }
  .fixed-header tbody {
    display: block; /* Переключаем на блочное отображение */
    height: 120px; /* Задаём высоту области прокрутки */
    overflow-y: auto; /* Добавляем возможность прокрутки */
  }
</style>
<div class="fixed-header">
  <table>
    <thead><tr><th>Колонка 1</th><th>Колонка 2</th></tr></thead>
    <tbody>
      <tr><td>Данные 1</td><td>Данные 2</td></tr>
      <!-- Здесь могут быть любые другие строки данных -->
    </tbody>
  </table>
</div>

Используя предложенный подход, вы сможете оставить шапку таблицы на месте, в то время как тело будет прокручиваться.

Создание динамически адаптируемой области прокрутки

Для динамического изменения высоты области прокрутки в зависимости от содержимого или размеров области просмотра можно использовать JavaScript:

function adjustTableBodyHeight() {
  var tableBody = document.querySelector('.fixed-header tbody');
  var availableHeight = window.innerHeight – tableBody.getBoundingClientRect().top;
  tableBody.style.height = Math.max(availableHeight, 100) + 'px';
}
window.onload = adjustTableBodyHeight;
window.onresize = adjustTableBodyHeight;

Такой подход позволяет организовать прокрутку тела таблицы, аналогичную прокрутке в электронных таблицах, например Excel.

Стилизация фиксированной шапки таблицы

Создание визуального эффекта фиксированной шапки возможно с помощью CSS-свойства position: sticky;:

<style>
  .sticky-header th {
    position: sticky; /* Элемент фиксируется при прокрутке */
    top: 0; /* Фиксация верхнего положения */
    background-color: #fff; /* Цвет фона */
  }
</style>
<table class="sticky-header">
  <thead>
    <tr><th>Колонка 1</th><th>Колонка 2</th></tr>
  </thead>
  <tbody>
    <tr><td>Данные 1</td><td>Данные 2</td></tr>
    <!-- И множество других строк данных -->
  </tbody>
</table>

Позиционирование sticky позволит "прикрепить" шапку к верхней части области просмотра при прокрутке.

Адаптивность для разных разрешений экранов

Важно предусматривать адаптивность таблиц для разных размеров устройств. Медиа-запросы помогут настроить размеры и стиль таблицы под нужное разрешение экрана:

@media (max-width: 768px) {
  .fixed-header, .sticky-header th {
    width: 100%;
  }
  .fixed-header tbody {
    max-height: 80px; /* Меньшая высота области прокрутки для маленьких экранов */
  }
}

Визуализация

ASCII-иллюстрация для наглядного представления концепции:

Верхний слой: 🚉 = Шапка (Платформа)
Нижний слой: 🚇 = Тело (Поезд с данными)

"Платформа" шапки остаётся на своём месте, тогда как "поезд" с данными может свободно двигаться:

🚉🔒: [Заголовок 1, Заголовок 2, Заголовок 3]
🚇💨: |Строка 1|
      |Строка 2|
      ...
      |Строка N|

Решение проблемы несовпадающих колонок

Чтобы обеспечить совпадение столбцов таблицы, в стилевых настройках используется table-layout: fixed;, и задаётся фиксированная ширина для <th>. При этом учтите, что поддержка position: sticky; может варьироваться в разных браузерах.

Доступность и удобство использования

Для обеспечения доступности используйте семантические HTML-теги, необходимые атрибуты и дизайн, учитывающий удобство навигации с использованием клавиатуры и технологий помощи для людей с отклонениями в здоровье.

Полезные материалы

1. position – CSS: Cascading Style Sheets | MDN — Аналитика CSS-свойства position, включая sticky.
2. html – Table header to stay fixed at the top when user scrolls it out of view with jQuery – Stack Overflow — Обсуждение фиксирования шапок таблиц с помощью jQuery.
3. How To Create a Sticky Element – W3Schools — Инструкция по созданию "липкого" элемента.
4. Table Design Patterns On The Web — Smashing Magazine — Рекомендации по дизайну веб-таблиц.
5. Responsive Data Tables | CSS-Tricks – CSS-Tricks — Как сделать таблицы адаптивными.
6. overflow – CSS: Cascading Style Sheets | MDN — Управление контентом, выходящим за пределы отображаемой области.