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

Лип­кая шап­ка таб­ли­цы на 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

Источник

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

Инструкция как сделать липкую шапку таблицы без использования 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, а так же добавьте готовый скрипт.

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

Источник

Фиксированная шапка таблицы при прокрутке

Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает несколько таблиц на одной странице. Из минусов – не корректно работает на мобильных.

  .
 
Артикул
 
Текущая МРЦ
 
Новая РРЦ
 
  
 
2934/8C
 
20 369,00
 
14 258,30
 
 
2756/6C
 
16 276,00
 
11 393,20
 
 
2934/8C
 
20 369,00
 
14 258,30
 
 

CSS

JS

function FixTable(table) < var inst = this; this.table = table; $('tr >th',$(this.table)).each(function(index) < var div_fixed = $('').addClass('fixtable-fixed'); var div_relat = $('').addClass('fixtable-relative'); div_fixed.html($(this).html()); div_relat.html($(this).html()); $(this).html('').append(div_fixed).append(div_relat); $(div_fixed).hide(); >); this.StyleColumns(); this.FixColumns(); $(window).scroll(function()< inst.FixColumns() >).resize(function()< inst.StyleColumns() >); > FixTable.prototype.StyleColumns = function() < var inst = this; $('tr >th', $(this.table)).each(function()< var div_relat = $('div.fixtable-relative', $(this)); var th = $(div_relat).parent('th'); $('div.fixtable-fixed', $(this)).css(< 'width': $(th).outerWidth(true) - parseInt($(th).css('border-left-width')) + 'px', 'height': $(th).outerHeight(true) + 'px', 'left': $(div_relat).offset().left - parseInt($(th).css('padding-left')) + 'px', 'padding-top': $(div_relat).offset().top - $(inst.table).offset().top + 'px', 'padding-left': $(th).css('padding-left'), 'padding-right': $(th).css('padding-right') >); >); > FixTable.prototype.FixColumns = function() < var inst = this; var show = false; var s_top = $(window).scrollTop(); var h_top = $(inst.table).offset().top; if (s_top < (h_top + $(inst.table).height() - $(inst.table).find('.fixtable-fixed').outerHeight()) && s_top >h_top) < show = true; >$('tr > th > div.fixtable-fixed', $(this.table)).each(function()< show ? $(this).show() : $(this).hide() >); > $(document).ready(function()< $('.fixtable').each(function() < new FixTable(this); >); >);

Источник