Шаблон:Прикрепленный заголовок
.svg/1280px-Test_Template_Info-Icon_-_Version_(2).svg.png){kind=icon}
 | Этот шаблон используется примерно на 4500 страницах , и изменения могут быть широко замечены. Протестируйте изменения на подстраницах шаблона /sandbox или /testcases или на вашей собственной подстранице пользователя . Рассмотрите возможность обсуждения изменений на странице обсуждения перед их реализацией. |
 | В этом шаблоне используются TemplateStyles: |
Этот шаблон прикрепляет заголовки столбцов таблицы к верхней части экрана, когда данные таблицы прокручиваются и исчезают из поля зрения. Он используется в высоких таблицах, в которых заголовки столбцов могут быть труднозапоминающимися при прокрутке данных.
Использование
Включите этот шаблон, добавив {{sticky header}}или перенаправив его {{sticky-header}}над таблицей. Добавьте один из следующих классов в начало wikitext таблицы.
| Сорт | Краткое содержание |
|---|---|
sticky-header | Сделайте первую строку заголовка закрепленной сверху. |
sticky-header-multi | Требуется сортируемая таблица . Сделайте несколько строк заголовков сверху липкими. Избегайте использования с sorttopклассом, который становится липким после сортировки. Избегайте делать липкими заголовки, которые не относятся ко всей таблице (например, строки заголовков разделов). Избегайте делать липкими чрезмерно высокие строки заголовков, которые могут блокировать слишком много данных на коротких экранах (например, мобильный альбомный режим). |
Одиночная липкая строка заголовка
Класс sticky-headerиспользуется для того, чтобы сделать первую строку заголовка сверху липкой. Сортируемость не требуется.
| Цвет | А | Б | С |
|---|---|---|---|
| Макс | 10 | 11 | 12 |
| Красный | 1 | 2 | 3 |
| Лайм | 4 | 5 | 6 |
| Золото | 7 | 8 | 9 |
| Синий | 10 | 11 | 12 |
| Общий | 22 | 26 | 30 |
{{ 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 |} Несколько строк липких заголовков
задаче Phabricator T355492
Класс sticky-header-multiиспользуется для того, чтобы сделать несколько строк заголовков сверху липкими. Сортируемая таблица необходима , поскольку сортируемость в настоящее время является единственным способом перемещения последовательных строк заголовков столбцов к <thead>элементу. Если некоторые или все столбцы не должны быть сортируемыми, то class=unsortableможно поместить в ячейку заголовка со значком сортировки. Верхняя часть таблицы все равно будет липкой. См. Help:Sortable tables . Если JavaScript отключен, то сортируемость и это решение не будут работать.
Избегайте использования sorttopкласса, так как sortable перемещает эти строки в <thead>элемент после сортировки, что делает их также липкими сверху. Решением может быть перемещение их вниз и использование sortbottomвместо этого класса.
| Цвет | Данные | ||
|---|---|---|---|
| А | Б | С | |
| Красный | 1 | 2 | 3 |
| Лайм | 4 | 5 | 6 |
| Золото | 7 | 8 | 9 |
| Синий | 10 | 11 | 12 |
| Макс | 10 | 11 | 12 |
| Общий | 22 | 26 | 30 |
{{ 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 |) между последней строкой заголовка столбца и первой строкой заголовка раздела, чтобы последняя не включалась в последующие строки заголовков.
| Цвет | Данные | ||
|---|---|---|---|
| А | Б | С | |
| Раздел 1 | |||
| Красный | 1 | 2 | 3 |
| Лайм | 4 | 5 | 6 |
| Раздел 2 | |||
| Золото | 7 | 8 | 9 |
| Синий | 10 | 11 | 12 |
{{ 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>) в заголовках или разделении таблицы на более мелкие таблицы для уменьшения количества заголовков.
Группа заголовков 1 | |||
|---|---|---|---|
Группа заголовков 2 | Группа заголовков 3 | ||
| Заголовок 1 | Заголовок 2 | Заголовок 3 | Заголовок 4 |
| данные | данные | данные | данные |
| данные | данные | данные | данные |
| данные | данные | данные | данные |
| данные | данные | данные | данные |
| данные | данные | данные | данные |
| данные | данные | данные | данные |
| данные | данные | данные | данные |
| данные | данные | данные | данные |
Известные проблемы
Протестировано в браузерах на Windows 10 , Windows 11 , iOS 17 ( iphone SE 2020 и iPhone 14 Pro Max ) и Android 14 ( Samsung Galaxy S21 ).
- Не работает в обложке MonoBook, если ширина браузера составляет 550 пикселей или меньше, поскольку
body.skin--responsive .monobook-body {overflow: auto;}стиль нельзя переопределить. - На телефонах Android заголовки таблиц не прикрепляются сверху, если хотя бы одна таблица, использующая этот шаблон, шире экрана, что более вероятно в портретной ориентации . Горизонтальная прокрутка таблицы не работает с этим шаблоном, поэтому широкие таблицы выходят за пределы основной области содержимого, делая всю страницу шире и требуя вместо этого горизонтальной прокрутки всей страницы. Уменьшение масштаба для просмотра всей таблицы делает заголовки прикреплёнными, но также делает текст меньше и менее читаемым, чем шире таблица. В настоящее время единственным полурешением является просмотр прикреплённых заголовков в уменьшенном масштабе в альбомной ориентации вместо портретной, чтобы текст был более читаемым.
<div style="overflow:auto"></div>- Не используйте это вокруг таблиц. Это предотвращает липкие заголовки, пока они не будут удалены. Смотрите разницу. Смотрите таблицу "Список по регионам".- Переход к {{ Anchor }} (или аналогичному механизму создания якоря) в таблице приводит к тому, что это место таблицы оказывается в верхней части экрана, где его закрывает липкий заголовок. Верно для всех скинов, кроме Vector 2022 и скина MinervaNeue (мобильный). Смотрите обсуждения здесь и здесь .
Смотрите также
- Справка:Таблица/Дополнительно § Таблицы с прикрепленными заголовками
- {{ sticky table start }} — позволяет закрепить строки и столбцы внутри прокручиваемой области.
- {{ shy }} – Может использоваться для сужения столбцов путем добавления мягкого дефиса к слову, что позволяет переносить его.
Еще больше стилей шаблонов для таблиц:
- {{ sort under }} — перемещает стрелки сортировки под заголовки.
- {{ row hover highlight }} - добавляет подсветку строк при наведении и возможность выбора белого фона.
- {{ static row numbers }} - добавляет столбец номеров строк в таблицу.
- {{ table altitude }} — выравнивает ячейки в столбце или во всей таблице.
