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

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

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

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

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

Эта таблица имеет самый обычный 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;
}