Таблица с закреплённой строкой заголовков
Закреплённые заголовки помогают читать длинную таблицу, не теряя связь между колонкой и значениями.
Назначение
Закреплённые заголовки помогают читать длинную таблицу, не теряя связь между колонкой и значениями.
Как это работает
Для th используют position:sticky и top:0 внутри прокручиваемого контейнера. Непрозрачный фон не даёт строкам просвечивать через заголовок; scope сохраняет смысловые связи.
Пример
<style>.wrap{max-height:10rem;overflow:auto}table{border-collapse:separate;border-spacing:0;width:100%}th{position:sticky;top:0;background:#eaf4ee}th,td{padding:12px;border-bottom:1px solid #abc;text-align:left}</style>
<div class="wrap" tabindex="0" aria-label="Таблица уроков"><table><caption>План занятий</caption><thead><tr><th scope="col">Тема</th><th scope="col">Минуты</th></tr></thead><tbody><tr><td>HTML</td><td>20</td></tr><tr><td>CSS</td><td>30</td></tr><tr><td>JS</td><td>40</td></tr><tr><td>Практика</td><td>25</td></tr></tbody></table></div>Что должно получиться
При достаточном количестве строк заголовок остаётся у верхнего края прокручиваемой области. Внешняя страница не обязана прокручиваться вместе с внутренней таблицей.
Граница применения и частая ошибка
Не делайте закрепление способом скрыть отсутствие caption и заголовков. Также проверьте ближайший прокручиваемый предок: sticky привязывается к условиям своей области, а не всегда к окну.
Самостоятельная проверка
Добавьте двадцать строк и прокрутите контейнер. Затем увеличьте масштаб: заголовки должны оставаться читаемыми, а таблица — доступной по горизонтали и с клавиатуры.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.