Css фиксированная шапка таблицы

A table with a fixed (sticky) header

Often, we come across situations where we have a table with lots of data in it. So when we scroll, the table header are hidden off screen, and soon we don’t know what columns we’re looking at. This problem can easily be addressed by wrapping the table in a div , and a bit of friendly CSS.

position: sticky

Sticky positioning is kind of a hybrid, between relative and fixed . To quote https://developer.mozilla.org/en-US/docs/Web/CSS/position, «The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left.» Basically, the element occurs in the normal document flow, until you scroll past a certain offset, at which point it sticks to the top of the specified container. We’re going to wrap our table in a div (which we’ll make scrollable by setting its height and overflow-y properties), and make the th s position in a sticky way. We’ll also collapse the internal borders of the table using the border-collapse property. Is it really that simple? It actually is. Here’s the code, in its full unadulterated glory (don’t worry, I didn’t include any spoiler from season 2 of The Umbrella Academy, but seriously, go watch it):

HTML

    Sticky Header  charset="UTF-8" />  rel="stylesheet" href="src/styles.css" />   class="wrapper">    Number Name Superpower Email     1 Luther Super-strength luther@umbrella.edu   2 Diego Telekinesis diego@umbrella.edu   3 Allison Rumor allison@umbrella.edu   4 Klaus Seance klaus@umbrella.edu   5 Five Time-travel five@umbrella.edu   6 Ben Inter-dimensional monster ben@umbrella.edu   7 Vanya Apocalyptic destruction vanya@umbrella.edu   - Reginald [Spoiler] powers reginald@umbrella.edu   - Pogo Human communication pogo@umbrella.edu   - Cha-Cha Ruthlessness chacha@temps.comm   - Hazel Compassion hazel@temps.comm       

CSS

body  font-family: "Segoe UI", sans-serif; > table  width: 100%; border-collapse: collapse; > th, td  padding: 8px; > th  text-align: left; background: #eee; position: sticky; top: 0px; > .wrapper  border: 1px solid #ddd; width: 100%; height: 300px; overflow-y: auto; > 

Источник

Лип­кая шап­ка таб­ли­цы на CSS

Практически на всех сайтах есть таблицы. А если эти таблицы имеют более дюжины строк, то вам, рано или поздно, понадобится сделать шапку таблицы «липкой». Многие до сих пор делают это с помощью JavaScript, но есть способ на чистом CSS.

Position Sticky Скопировать ссылку

Как не выходить за рамки? Скопировать ссылку

К сожалению почти у всех таблиц, которые я встречаю, используется border-collapse: collapse . С этим свойством проще делать рамки для ячеек, но при этом сами рамки им уже не принадлежат, а как бы становятся частью самой таблицы. А это значит, что если шапка таблицы и стала липкой — рамки её ячеек всё равно прокручиваются вместе с таблицей.

Чтобы избавиться от этой проблемы, можно использовать border-collapse: separate . Да, с этим свойством рамки ячеек перестанут схлопываться, но нам это не помешает.

В некоторых дизайн-системах у ячеек есть только горизонтальные рамки, а значит достаточно просто указывать border-top или border-bottom . Но даже если вам нужно указать рамки со всех сторон, то есть много способов это сделать:

Рамки для конкретных сторон Скопировать ссылку

:root < --border-width: 2px; --border-color: #CED4DA; --border: var(--border-width) solid var(--border-color); >table < border-collapse: separate; border-spacing: 0; >thead < position: sticky; top: 0; >th, td < border-right: var(--border); border-bottom: var(--border); >th:first-child, td:first-child < border-left: var(--border); >thead tr:first-child th

Рамки как box-shadow Скопировать ссылку

В примере выше мы устанавливаем расстояние между ячейками с помощью border-spacing для таблицы и отступ для прилипания с помощью top для шапки, равный размеру рамки. А затем добавляем ячейкам тень box-shadow , имитирующую рамку.

Рамки как outline Скопировать ссылку

В примере выше мы повторяем трюк из предыдущего примера, но имитирурем рамку с помощью outline .

Источник

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 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:

html> html> head> title>Title of the document title> style> .tableFixHead < overflow-y: auto; /* make the table scrollable if height is more than 200 px */ height: 200px; /* gives an initial height of 200px to the table */ > .tableFixHead thead th < position: sticky; /* make the table heads sticky */ top: 0px; /* table head will be placed from the top of the table and sticks to it */ > table < border-collapse: collapse; /* make the table borders collapse to each other */ width: 100%; > th, td < padding: 8px 16px; border: 1px solid #ccc; > th < background: #eee; > style> head> body> div class="tableFixHead"> table> thead> tr> th>Col 1 th> th>Col 2 th> tr> thead> tbody> tr> td>1.1 td> td>2.1 td> tr> tr> td>1.2 td> td>2.2 td> tr> tr> td>1.3 td> td>2.3 td> tr> tr> td>1.4 td> td>2.4 td> tr> tr> td>1.5 td> td>2.5 td> tr> tr> td>1.6 td> td>2.5 td> tr> tr> td>1.7 td> td>2.5 td> tr> tr> td>1.8 td> td>2.5 td> tr> tbody> table> div> body> html>

Result

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 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:

html> html> head> title>Title of the document title> style> .fixed_header < width: 400px; table-layout: fixed; border-collapse: collapse; > .fixed_header tbody < display: block; width: 100%; overflow: auto; height: 100px; > .fixed_header thead tr < display: block; > .fixed_header thead < background: black; color: #fff; > .fixed_header th, .fixed_header td < padding: 5px; text-align: left; width: 200px; > style> head> body> table class="fixed_header"> thead> tr> th>Col 1 th> th>Col 2 th> th>Col 3 th> th>Col 4 th> th>Col 5 th> tr> thead> tbody> tr> td>1 td> td>2 td> td>3 td> td>4 td> td>5 td> tr> tr> td>6 td> td>7 td> td>8 td> td>9 td> td>10 td> tr> tr> td>11 td> td>12 td> td>13 td> td>14 td> td>15 td> tr> tr> td>16 td> td>17 td> td>18 td> td>19 td> td>20 td> tr> tr> td>21 td> td>22 td> td>23 td> td>24 td> td>25 td> tr> tbody> table> body> html>

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.

.fixed_header td < border: 1px solid #797878; >

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

Источник

Фиксированная шапка для таблицы при скроллировании (CSS)?

Имеется большая HTML таблица, которая не влазит в экран ни по горизонтали, ни по вертикали.

Нужно сделать так, чтобы при скроллировании вниз шапка таблицы всегда отображалась на странице.

(подобная функциональность реализована в MS Excel)

В идеале нужно сделать так же для первого столбца, который бы оставался на странице при скроллировании вправо.

Можно ли тут обойтись одним СSS, или придёться подключать JS?

Вещь местами очень нужная, а все решения сводятся к фиксированному позицинированию и изменении параметров ( яваскриптом ) при скроллинге 🙁
жалко что в html 5 не добавили нативную поддержку 🙁

Раз никто не предлагает предложу свой вариант.
При прокрутке экрана, если координаты шапки относительно страницы уходят за экран, то отображать фиксированный «table», с позицией «left» как у шапки талицы, и «top» близким к 0. В эту таблицу нужно скопировать содержимое шапки, например через $(‘tr.head’).clone();

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

Источник

Таблица с липкой шапкой

Инструкция как сделать липкую шапку таблицы без использования JavaScript и без jQuery. Фиксированные заголовки таблицы сделанные на чистом CSS.

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

На самом деле эта типовая задача решается при помощи всего лишь трёх строчек css-кода. И это в буквальном смысле.

Вот посмотрите такое DEMO таблицы:

ID	2	3	4	5
1	Второй столбик.	Третий столбик.	Четвёртый столбик.	Пятый столбик.
2	Второй столбик.	Третий столбик.	Четвёртый столбик.	Пятый столбик.
3	Второй столбик.	Третий столбик.	Четвёртый столбик.	Пятый столбик.
4	Второй столбик.	Третий столбик.	Четвёртый столбик.	Пятый столбик.
5	Второй столбик.	Третий столбик.	Четвёртый столбик.	Пятый столбик.
6	Второй столбик.	Третий столбик.	Четвёртый столбик.	Пятый столбик.
7	Второй столбик.	Третий столбик.	Четвёртый столбик.	Пятый столбик.
8	Второй столбик.	Третий столбик.	Четвёртый столбик.	Пятый столбик.
9	Второй столбик.	Третий столбик.	Четвёртый столбик.	Пятый столбик.
10	Второй столбик.	Третий столбик.	Четвёртый столбик.	Пятый столбик.
11	Второй столбик.	Третий столбик.	Четвёртый столбик.	Пятый столбик.
12	Второй столбик.	Третий столбик.	Четвёртый столбик.	Пятый столбик.
13	Второй столбик.	Третий столбик.	Четвёртый столбик.	Пятый столбик.
14	Второй столбик.	Третий столбик.	Четвёртый столбик.	Пятый столбик.
15	Второй столбик.	Третий столбик.	Четвёртый столбик.	Пятый столбик.
16	Второй столбик.	Третий столбик.	Четвёртый столбик.	Пятый столбик.
17	Второй столбик.	Третьий столбик.	Четвёртый столбик.	Пятый столбик.
18	Второй столбик.	Третий столбик.	Четвёртый столбик.	Пятый столбик.
19	Второй столбик.	Третий столбик.	Четвёртый столбик.	Пятый столбик.
20	Второй столбик.	Третий столбик.	Четвёртый столбик.	Пятый столбик.

Ну как вам такое? Правда круто?

Эта таблица имеет самый обычный html:

 
 
Третий столбик.
 
Четвёртый столбик.
 
Пятый столбик.
 
 
 

Липкой шапку таблицы делает css-свойство position с установленным значением sticky . Плюс добавлены свойства top и z-index , чтобы всё работало правильно:

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

 background-color: #3e5d75; color: #dedede; 

Поддержка браузерами свойства sticky для таблиц: https://caniuse.com

Как реализовать сортировку данных в HTML-таблице на сайте. Сделате таблицу сортируемой при клике по заголовку колонки просто добавив атрибут data-sort=»sort_table» в тег table, а так же добавьте готовый скрипт.

*** Авторизируйтесь чтобы писать комментарии.

Источник