Закреплённая шапка таблицы: как не потерять заголовки при прокрутке

Когда длинную таблицу прокручивают вниз, её заголовки уходят за верхний край, а значения остаются на экране. Закреплённая шапка удерживает названия столбцов в поле зрения, поэтому читателю не приходится гадать, к чему относится число или статус. Чтобы приём помогал, а не закрывал данные, заранее определите область прокрутки, высоту шапки, поведение на узком экране и связь заголовков с ячейками.

Сначала проверьте задачу, а потом добавляйте `sticky`. Приём полезен, если пользователь сравнивает строки на протяжении нескольких экранов: например, изучает реестр заказов, список оборудования, журнал расходов или каталог с множеством атрибутов. Если таблица занимает только несколько строк, закреплённая шапка может отнять место и создать лишний визуальный слой. Для короткой таблицы обычно достаточно обычного заголовка и подписи.

Закрепление особенно ценно, когда значения похожи друг на друга или выражены числами: остаток, дата, сумма, процент, код. При этом фиксированная полоса должна помогать сопоставлять данные, а не превращаться в единственный способ узнать, что означает столбец. Структура HTML по-прежнему должна различать заголовочные и обычные ячейки. В таблице данных заголовки размечают элементом `<th>`, значения — `<td>`; для простых таблиц направление связи можно уточнить через `scope="col"`. Это помогает вспомогательным технологиям определять контекст ячейки независимо от визуального положения шапки.

До CSS ответьте на три вопроса: что движется, что остаётся на месте и относительно какой области? Возможны два разных сценария:

Запишите ответ в макете или задаче. От него зависит, на каком элементе размещать ограничение высоты и `overflow`, где закреплять шапку и какие слои должны перекрывать друг друга. Распространённый сбой возникает, когда разработчик добавляет `overflow: auto` на обёртку, но пользователь фактически прокручивает другой предок. CSS `position: sticky` привязывает элемент к ближайшему предку с механизмом прокрутки. Поэтому шапка может «прилипнуть» к внутреннему контейнеру, который сам не двигается, и визуально казаться обычной.

Проверьте цепочку предков от `th` к корню. Ищите `overflow: auto`, `scroll` и `hidden`, а затем прокрутите именно ту область, которую будет двигать пользователь. Для закрепления по вертикали задайте явный верхний отступ, например `top: 0`; без значения inset по нужной оси sticky не получит границу закрепления. Если над таблицей есть фиксированная панель, отступ должен учитывать её высоту, иначе шапка окажется под ней.

Шапка должна закрепляться относительно понятного контейнера. Если страницу прокручивают целиком, часто достаточно закрепить ячейки заголовка и оставить поведение естественным для страницы. Если таблица находится в собственной панели фиксированной высоты, задайте прокрутку панели, а внутри неё оставьте шапку на верхней границе этой панели. Не делайте одновременно две независимые вертикальные области прокрутки без явной причины: на тачпаде и мобильном устройстве пользователю трудно понять, какую из них он сейчас двигает.

Простой стартовый вариант может выглядеть так:

Пример CSS:

.table-scroll {
  max-height: 34rem;
  overflow: auto;
}

.table-scroll th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
}

Это лишь отправная точка. Её нужно адаптировать к реальной разметке, теме, горизонтальной прокрутке и элементам вокруг таблицы. Непрозрачный фон важен: без него прокручиваемые значения будут проступать сквозь заголовки. `z-index` помогает удерживать шапку поверх ячеек, но чрезмерно высокий слой способен накрыть меню, подсказки или модальные элементы. Уровень слоя следует согласовать с общей системой слоёв интерфейса, а не назначать случайное большое число.

При вертикальной прокрутке заголовки должны двигаться по горизонтали вместе с соответствующими столбцами. Проверьте это на самой широкой таблице: если горизонтально сдвинуть область, названия не должны остаться над чужими значениями. Закрепление по одной оси не гарантирует корректность другой. Когда одновременно фиксируют верхнюю строку и первый столбец, их пересечение требует отдельного слоя и фона; иначе одна закреплённая часть перекроет другую.

Укажите семантические роли заголовков и связь с данными в самой разметке, а не только стилем. В простом заголовке можно использовать `scope="col"`; если в первом столбце находятся названия строк, уместен `scope="row"`. В сложной таблице с несколькими уровнями заголовков связь может потребовать более явного описания. Руководство W3C WAI по таблицам разбирает простые и многоуровневые связи между заголовками и ячейками: https://www.w3.org/WAI/tutorials/tables/ . Закрепление — визуальное удобство, оно не заменяет эту семантику.

Не превращайте таблицу данных в набор визуально похожих `div` только ради лёгкого позиционирования. Если это действительно интерактивная сетка с выбором, перемещением фокуса и редактированием ячеек, проектируйте её как отдельный сценарий управления. Для обычного чтения и сравнения записей используйте табличную структуру; поведение интерфейса должно соответствовать природе данных.

Одна короткая строка заголовков проста: она занимает мало места и оставляет больше строк данных видимыми. Но если подписи длинные, есть единицы измерения или подзаголовки, высота шапки растёт. Закреплённая двухстрочная область может закрывать значительную часть таблицы, особенно на ноутбуке с небольшой областью просмотра или на телефоне. Сократите формулировки, перенесите пояснения в подпись или подсказку, либо оставьте многострочную шапку обычной, если закрепление делает чтение тесным.

При двух уровнях заголовков не закрепляйте только нижнюю строку, если верхняя задаёт её смысл. Например, подписи «План» и «Факт» бесполезны, если названия показателей над ними уже прокрутились. Протестируйте весь блок шапки как единое целое: он должен оставаться связанным визуально и структурно. Если ряд закреплённых строк имеет разную высоту, второй ряд должен начинать закрепление ниже первого, а не накладываться поверх него. Зафиксируйте высоты в тестовом состоянии или вычисляйте их так, чтобы перенос текста не ломал границу.

На узком экране таблица часто требует горизонтальной прокрутки. В этом случае закреплённая шапка должна оставаться над теми же колонками, пока содержимое движется вбок. Следите за первым столбцом: если он тоже фиксируется, проверьте угол пересечения и убедитесь, что он не закрывает заголовок строки или соседние данные.

Проверьте интерфейс с увеличенным масштабом текста и браузера. Длинные подписи могут перенестись, шапка — стать выше, а полезная область прокрутки — уменьшиться. Важное значение не должно скрываться за закреплённой полосой при переходе по ссылке, фокусе клавиатуры или возврате к выбранной строке. У таблицы должна быть понятная граница прокрутки, которую можно обнаружить визуально; желательно, чтобы рядом оставался контекст страницы или панели, объясняющий, какие данные находятся внутри.

Если таблица на мобильном превращается в карточки, уберите sticky у элементов, которые уже не являются общей шапкой столбцов. Сначала определите, какую информацию человек сравнивает между карточками, и вынесите важную подпись в каждую карточку либо сохраните прокручиваемую таблицу с явным горизонтальным поведением. Не оставляйте «висящие» короткие ярлыки, смысл которых виден только в колонке, находящейся далеко за экраном.

Sticky меняет видимое положение, но не должен менять порядок чтения и фокусировки. Пользователь клавиатуры должен суметь попасть в область таблицы, перемещаться по содержимому страницы дальше неё и понимать, когда фокус находится внутри прокручиваемого контейнера. Проверьте, что закреплённая шапка не закрывает элемент, к которому переместился фокус. Контраст текста и фона сохраняйте достаточным при обычном и активном состоянии; индикатор фокуса не должен обрезаться границей контейнера.

Название таблицы и краткое описание помогают понять, что именно перечислено и как читать колонки. Для таблицы в отчёте пригодится подпись, например «Заказы, ожидающие отправки на 24 сентября», если дата действительно соответствует данным. Не подменяйте это название декоративным текстом внутри закреплённой полосы. Если данные обновляются, укажите момент актуальности рядом с таблицей, чтобы человек не принял неизменную шапку за признак свежих значений.

Проверьте страницу с программой экранного доступа хотя бы на типовом пользовательском пути, если таблица критична для работы. Важный критерий — заголовок строки и столбца остаётся доступным как структурная связь, а не только виден глазами. W3C WAI подчёркивает, что одних визуальных различий недостаточно: отношение заголовочных и обычных ячеек нужно передавать разметкой. Это особенно существенно, когда таблица имеет несколько уровней заголовков или сочетает заголовки строк и колонок.

Используйте короткий чек-лист на реальных данных, а не только на пустом макете:

Для проверочного набора возьмите как минимум одну короткую таблицу и одну широкую с длинными подписями. Например, в реестре оборудования можно использовать колонки «Инвентарный номер», «Место установки», «Ответственный», «Последняя проверка» и «Состояние». Добавьте длинное название площадки и запись, в которой значение отсутствует. Сразу станет заметно, сохраняется ли выравнивание и не затмевает ли шапка рабочую область.

**Закрепить ради современного вида.** Если строк мало, визуальный слой не окупается. Оставьте обычный заголовок и проверьте реальную высоту содержимого.

**Не определить прокручиваемого предка.** `overflow` на внутреннем элементе может изменить точку, относительно которой sticky закрепляется. Найдите контейнер, который действительно движется, и ставьте правило с учётом этой структуры. Справочник MDN объясняет поведение sticky относительно ближайшего предка с механизмом прокрутки: https://developer.mozilla.org/en-US/docs/Web/CSS/position .

**Сделать фон прозрачным или забыть порядок слоёв.** Ячейки будут проступать сквозь заголовки, а раскрывающееся меню может уйти под них. Назначьте спокойный непрозрачный фон и согласованный `z-index`.

**Закрепить только часть многоуровневых подписей.** Нижний ряд потеряет контекст. Рассматривайте несколько строк как один блок и протестируйте их вместе.

**Скрыть смысл в цвете и положении.** Закреплённая визуальная строка не заменяет правильные `th`, `td` и связи заголовков с данными.

**Проверить только первый экран.** Переносы, загрузка новых строк и горизонтальное движение проявляют ошибки позже. Используйте крайние значения и узкое окно.

Нет. Приём оправдан, когда таблица достаточно длинная и читатель регулярно сопоставляет далёкие друг от друга строки. Для нескольких коротких строк обычная шапка проще и экономит место. Решение принимайте по задаче и размеру фактического набора данных.

Проверьте `top` и предков элемента. Sticky ориентируется на ближайшего предка с механизмом прокрутки; контейнер с `overflow: auto`, `hidden` или `scroll` может оказаться неожиданной границей. Затем убедитесь, что именно этот контейнер прокручивается в вашем макете.

Можно, когда видимая часть остаётся однозначной сама по себе. Если подзаголовки зависят от общей группы колонок, закрепляйте оба уровня или повторите понятный контекст другим способом. Не оставляйте на экране ярлык вроде «Факт», если заголовок группы уже исчез.

Проверьте, что ячейки заголовка и данные двигаются вбок в одной области и сохраняют совпадение. Если первый столбец фиксирован отдельно, задайте ему отдельный слой и проверьте угол пересечения. Вертикальное закрепление само по себе не решает горизонтальное выравнивание.

Только если этого требует сценарий. Сортировка в заголовке должна иметь доступное имя и понятное состояние; кликабельные зоны не должны быть настолько тесными, чтобы мешать выбору. Для простой подписи не создавайте видимость кнопки.

Задайте отступ `top` с учётом высоты панели, которая остаётся на экране, и проверьте изменение этой высоты при адаптивной компоновке. Тестируйте не только мышью, но и переходом к фокусируемому элементу ниже таблицы.

Да, если карточки показывают значения без постоянной общей шапки. Подпишите важные поля в каждой карточке или оставьте таблицу с очевидной областью прокрутки. Пользователь не должен помнить, какое название колонки осталось за пределами экрана.

Закреплённая шапка работает, когда удерживает контекст и не отнимает слишком много места. Определите прокручиваемый контейнер, сохраните горизонтальное соответствие колонок, обработайте высоту и пересечения, а затем проверьте масштаб, клавиатуру и семантические связи заголовков. Если вы создаёте собственный рукописный шрифт для таблиц и отчётов, проверьте на Fontgenerator читаемость цифр, коротких меток и знаков, которые попадут в шапку и строки.