Липкая шапка таблицы на CSS
Практически на всех сайтах есть таблицы. А если эти таблицы имеют более дюжины строк, то вам, рано или поздно, понадобится сделать шапку таблицы «липкой». Многие до сих пор делают это с помощью JavaScript, но есть способ на чистом CSS.
Position Sticky Скопировать ссылку
Надо добавить position: sticky к <thead> (или <tr> , что там у вас в роли шапки?) и не забыть указать top :
Еще недавно в Chrome был баг, который не позволял делать липкими <thead> и <tr> , но в версии 91 его исправили. А всё благодаря тому, что в браузере теперь используется новый движок для рендеринга таблиц TablesNG.
Если вам всё-таки нужна поддержка и более старых версий, то можно сделать липкими сами ячейки ( <td> ) в шапке таблицы. Правда при этом будет сложно указать всем правильное значение top , когда шапка состоит из нескольких строк.
Как не выходить за рамки? Скопировать ссылку
К сожалению почти у всех таблиц, которые я встречаю, используется border-collapse: collapse . С этим свойством проще делать рамки для ячеек, но при этом сами рамки им уже не принадлежат, а как бы становятся частью самой таблицы. А это значит, что если шапка таблицы и стала липкой — рамки её ячеек всё равно прокручиваются вместе с таблицей.
Чтобы избавиться от этой проблемы, можно использовать border-collapse: separate . Да, с этим свойством рамки ячеек перестанут схлопываться, но нам это не помешает.
В некоторых дизайн-системах у ячеек есть только горизонтальные рамки, а значит достаточно просто указывать border-top или border-bottom . Но даже если вам нужно указать рамки со всех сторон, то есть много способов это сделать:
Рамки для конкретных сторон Скопировать ссылку
Рамки как box-shadow Скопировать ссылку
В примере выше мы устанавливаем расстояние между ячейками с помощью border-spacing для таблицы и отступ для прилипания с помощью top для шапки, равный размеру рамки. А затем добавляем ячейкам тень box-shadow , имитирующую рамку.
Рамки как outline Скопировать ссылку
В примере выше мы повторяем трюк из предыдущего примера, но имитирурем рамку с помощью outline .
Фиксация таблицы в html
Если вам надо зафиксировать таблицу по центру, можно задать блоку с таблицей margin:0 auto; Если вам все же захочется вычислять какой-то хитрый марджин, то css уже давно умеет так (например): margin-left: calc(50vw — 150px); где 50vw — это половина ширины экрана, а 150px (или сколько там надо) — половина ширины таблицы.
Укажите margin-left (или margin-right , в зависимости от того где зафиксировать таблицу слева или справа) в пискелях или просто отцентрируйте таблицу через margin: 0 auto; .
UPDATE
Спасибо участнику @Mikl за вдохновение. Только можно не рассчитывать вручную ширину таблицы, а сделать это с помощью свойства transform . Тогда CSS для вашей таблицы будет выглядеть так:
Фиксированый стиль таблицы или Fixed Table Layouts
Как вы наверняка знаете, CSS свойство table-layout предназначено для управления режимом формирования ширины столбцов в таблице. Оно может принимать следующие значения: авто, фиксировано или наследственно. По умолчанию в браузерах для отображения таблицы используется стандартное поведение: браузер рассчитывает ширину строки как сумму ширины всех ячеек. Следом, по тому же принципу рассчитывает ширину 2-й строки, и если размеры какой-либо ячейки превышают размеры вышестоящей ячейки, перестраивает всю таблицу. Далее определяет ширину 3-й ячейки, 4-й и т.д. В случае если таблица имеет много, очень много рядов, расчет ширины может немного затянуться…
Однако можно (я бы даже сказал нужно) задействовать упрощенный режим который выражается в том, что браузер при определении ширины не берет в расчет содержимое последующих ячеек, а опирается на значение свойств width таблицы, столбцов и ячеек из первой строки.
В CSS (таблицы каскадных стилей) с помощью свойства table-layout мы можем управлять какой режим формирования таблицы нам нужен. Речь идет собственно об этом:
Это свойство очень хорошо поддерживается и очень даже полезно, так как позволяет вам создавать более предсказуемую разметку под вашу таблицу. По умолчанию, это свойство установлено в значение авто, и это, наверно, известно большинству из вас. Но этот режим как по мне так очень ненадежный и непредсказуемый. Приведем пример: 
Режим table-layout: fixed
Если теперь задействовать режим table-layout: fixed то можно уверенно получить вполне себе предсказуемый результат по месту.
В случае применения этого режима, расчет ширины столбцов идет по первой строчке и все последующие используют это значение. Может и звучит странновато для понимания, но на самом деле все просто, приведем пример:
Применение
Крис озадачился этим вопросом, так как ему хотелось. что бы его «Pen»ы (в переводе еще смешнея звучит) в лист вью на CodePen отображались в столбиках с унифицированой шириной и не портили ему всю картину, вот что у него получилось:
Он остался очень доволен этим.
Надеюсь, все помнят, что таблицы нужны для табулированных значений и емайлов, а не для задания разметки страниц.
Посмотрите на этот практический пример (предполагаю, что почти всем понравится это):
Для лучшего примера вы можете попробовать использовать элемент , чтобы так же задать ширину столбцов, так как остальное будет рассчитано в зависимости от значений в первой строчке.
Скорость
Что касается скорости, то говорят, что такой стиль формирования таблицы быстрейший, и это очевидно — бо остальные строки не анализируются и следовательно время генерации не зависит от длины таблицы как таковой.
Почтовики
Что касается использования в разных почтовых клиентах, то это свойство, согласно сервису мониторинга поддержки свойств CSS в почтовых клиентах, прекрасно поддерживается.
Заключение
Надеюсь, этот перевод кому-то действительно поможет лучше понять, как работает table-layout: fixed и подбросит идей по его использованию в своих проектах.
Кстати, у кого нибудь есть идеи, почему это свойство не используется по умолчанию?
How to Create a Table with a Fixed Header and Scrollable Body
In this tutorial, find some methods of creating an HTML table, which has a fixed header and scrollable body. Of course, you need to use CSS.
It is possible to achieve such a result by setting the position property to “sticky” and specifying 0 as a value of the top property for the <th> element.
As usual, you can open the Try it Yourself demo link and play with the properties to understand them better.
You can also read the comments in front of each line to understand the properties better.
Example of creating a table with a scrollable body by using the position property:
Result
| Col 1 | Col 2 |
|---|---|
| 1.1 | 2.1 |
| 1.2 | 2.2 |
| 1.3 | 2.3 |
| 1.4 | 2.4 |
| 1.5 | 2.5 |
| 1.6 | 2.5 |
| 1.7 | 2.5 |
| 1.8 | 2.5 |
Great! Huh? But let’s face it! I don’t like to see that scrollbar starting from the head section of the table!
So, let’s continue to the next example and fix that issue together!
Thers’s another method of creating a table with a fixed header and scrollable body. In the example below, we set the display to “block” for the <tbody> element so that it’s possible to apply the height and overflow properties.
Example of creating a table with a scrollable body by using the display property:
As mentioned before, we used overflow: auto on the tbody along with the display: block .
Here’s our result, and enjoy the difference!
| Col 1 | Col 2 | Col 3 | Col 4 | Col 5 |
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 |
As you have noticed, we didn’t use borders in the previous examples. However, if you need to add borders, you can simply use border property on all td tags.