В этой статье описана тема, этот как создать таблицу HTML, чей заголовок становится фиксированным при прокрутке на чистый CSS, но главное без Javascript. Постоянные заголовки в таблицах HTML можно получить с помощью свойства CSS position: sticky элемента thead.
Исправление строки заголовка таблицы при прокрутке страницы было довольно сложной задачей, которая была каким-то образом достигнута с помощью Javascript. Теперь может быть легко достигнуто с 2 линиями при помощи HTML и CSS.
HTML
Код
<table>
<thead>
<tr>
<th>Колонка #1</th>
<th>Колонка #2</th>
<th>Колонка #3</th>
</tr>
</thead>
<tr>
<td>Ценность #1</td>
<td>Ценность #2</td>
<td>Ценность #3</td>
</tr>
<tr>
<td>Столбец #1</td>
<td>Столбец #2</td>
<td>Столбец #3</td>
</tr>
</table>
CSS
Код
thead {
position: sticky;
top: 0;
}
Использование border-collapse: collapse и присвоение границ th и td не будут работать с закрепленным позиционированием. Для этого нам нужно использовать border-collapse: separate и применить границы для th / td на соответствующих сторонах.
Демонстрация
