Как закрепить таблицу html

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

Источник

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); >); >);

Источник