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

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

<table class="demo">
	<thead>
		<tr>
			<th>ID</th>
			<th>2</th>
			<th>3</th>
			<th>4</th>
			<th>5</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Второй столбик...</td>
			<td>Третий столбик...</td>
			<td>Четвёртый столбик...</td>
			<td>Пятый столбик...</td>
		</tr>
		<!-- и так ещё 19 раз повтор блока tr -->
	</tbody>
</table>

 

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

th {
    position: sticky;
    top: 0;
    z-index: 2;
}

 

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

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

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

Записи по теме
Иконочный шрифт в Joomla 3
иконки Иконочный шрифт Icomoon, который используется в Joomla 3. Таблица иконок с названиями их классов и примеры использования иконок в HTML.
Скрипт для сортировки значений в таблице HTML
JavaScript Как реализовать сортировку данных в HTML-таблице на сайте. Сделате таблицу сортируемой при клике по заголовку колонки просто добавив атрибут data-sort="sort_table" в тег table, а так же добавьте готовый скрипт.

 

 

Комментарии 0

*** чтобы писать комментарии.