Этот шаблон прикрепляет заголовки столбцов таблицы к верхней части экрана, когда данные таблицы прокручиваются и исчезают из поля зрения. Он используется в высоких таблицах, в которых заголовки столбцов могут быть труднозапоминающимися при прокрутке данных.
Включите этот шаблон, добавив {{sticky header}}или перенаправив его {{sticky-header}}над таблицей. Добавьте один из следующих классов в начало wikitext таблицы.
Класс sticky-headerиспользуется для того, чтобы сделать первую строку заголовка сверху липкой. Сортируемость не требуется.
.svg/1280px-Test_Template_Info-Icon_-_Version_(2).svg.png){kind=icon}
{{ sticky header }} {| class = "wikitable sortable sticky-header" |+ Подпись |- ! Цвет !! A !! B ! class = "unsortable" | C |- class = sorttop | '''Макс''' || 10 || 11 || 12 |- | Красный || 1 || 2 || 3 |- | Лайм || 4 || 5 || 6 |- | Золотой || 7 || 8 || 9 |- | Синий || 10 || 11 || 12 |- class = sortbottom | '''Всего''' || 22 || 26 || 30 |} Класс sticky-header-multiиспользуется для того, чтобы сделать несколько строк заголовков сверху липкими. Сортируемая таблица необходима , поскольку сортируемость в настоящее время является единственным способом перемещения последовательных строк заголовков столбцов к <thead>элементу. Если некоторые или все столбцы не должны быть сортируемыми, то class=unsortableможно поместить в ячейку заголовка со значком сортировки. Верхняя часть таблицы все равно будет липкой. См. Help:Sortable tables . Если JavaScript отключен, то сортируемость и это решение не будут работать.
Избегайте использования sorttopкласса, так как sortable перемещает эти строки в <thead>элемент после сортировки, что делает их также липкими сверху. Решением может быть перемещение их вниз и использование sortbottomвместо этого класса.
{{ sticky header }} {| class = "wikitable sortable sticky-header-multi" |+ Подпись |- ! rowspan = 2 | Цвет ! colspan = 3 | Данные |- ! A !! B ! class = "unsortable" | C |- | Красный || 1 || 2 || 3 |- | Лайм || 4 || 5 || 6 |- | Золотой || 7 || 8 || 9 |- | Синий || 10 || 11 || 12 |- class = sortbottom | '''Макс''' || 10 || 11 || 12 |- class = sortbottom | '''Всего''' || 22 || 26 || 30 |} Последовательные строки заголовков столбцов прикреплены сверху, поэтому избегайте добавления строки заголовков прямо под заголовками столбцов, которые не относятся ко всей таблице, например, заголовка раздела, предназначенного для визуального разделения таблицы.
Решением может быть перемещение каждого раздела в столбец или отдельные таблицы, что также позволит избежать проблем с доступом согласно MOS:COLHEAD .
Другим решением может быть добавление пустой строки ячеек данных ( | colspan=4 |) между последней строкой заголовка столбца и первой строкой заголовка раздела, чтобы последняя не включалась в последующие строки заголовков.
{{ sticky header }} {| class = "wikitable sortable sticky-header-multi" |+ Подпись |- ! rowspan = 2 | Цвет ! colspan = 3 | Данные |- ! A !! B !! C |- | colspan = 4 | |- ! colspan = 4 | Раздел 1 |- | Красный || 1 || 2 || 3 |- | Лайм || 4 || 5 || 6 |- ! colspan = 4 | Раздел 2 |- | Золотой || 7 || 8 || 9 |- | Синий || 10 || 11 || 12 |} Избегайте чрезмерно высоких строк заголовков, которые могут блокировать слишком много или все данные при закреплении на небольшом экране мобильного устройства, особенно в альбомной ориентации . Некоторые решения могут заключаться в перемещении части текста заголовка в заголовок таблицы, более кратком тексте заголовка, удалении переносов строк ( <br>) в заголовках или разделении таблицы на более мелкие таблицы для уменьшения количества заголовков.
Протестировано в браузерах на Windows 10 , Windows 11 , iOS 17 ( iphone SE 2020 и iPhone 14 Pro Max ) и Android 14 ( Samsung Galaxy S21 ).
body.skin--responsive .monobook-body {overflow: auto;}стиль нельзя переопределить.<div style="overflow:auto"></div>- Не используйте это вокруг таблиц. Это предотвращает липкие заголовки, пока они не будут удалены. Смотрите разницу. Смотрите таблицу "Список по регионам".Еще больше стилей шаблонов для таблиц: