Таблица очень полезный элемент HTML, который позволяет упорядочить и отобразить данные в виде сетки строк и столбцов. Однако, иногда возникает необходимость закрепить шапку таблицы на месте, чтобы пользователь всегда видел названия столбцов. Кроме того, может потребоваться показывать только определенные столбцы в таблице, чтобы упростить представление данных. В этой статье я расскажу, как создать таблицу с фиксированной шапкой и выбранными столбцами.
Для создания таблицы с фиксированной шапкой, мы можем воспользоваться CSS свойством position: sticky. Это свойство позволяет закрепить элемент на месте внутри контейнера, когда пользователь прокручивает страницу. Нам нужно применить это свойство к заголовку таблицы (тег <th>), чтобы он оставался на месте, а остальные элементы прокручивались.
Чтобы отобразить только выбранные столбцы, мы можем использовать CSS свойство display: none. Нам нужно присвоить этому свойству всем ячейкам в таблице, которые представляют столбцы, которые не нужно отображать. В то же время, столбцы, которые должны быть видимыми, должны иметь свойство display: table-cell. Таким образом, мы можем легко настроить отображение только нужных нам столбцов.
Изготовление таблицы со статичной шапкой
Чтобы создать таблицу с фиксированной шапкой, можно использовать стандартный тег HTML <table> с вложенным тегом <thead>. Тег <thead> используется для размещения содержимого таблицы на странице, которое должно быть отображено вверху таблицы и оставаться видимым при прокрутке страницы.
В примере ниже показана таблица с шапкой, в которой каждый столбец является независимой частью таблицы:
<table>
<thead>
<tr>
<th>Столбец 1</th>
<th>Столбец 2</th>
<th>Столбец 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ячейка 1,1</td>
<td>Ячейка 1,2</td>
<td>Ячейка 1,3</td>
</tr>
<tr>
<td>Ячейка 2,1</td>
<td>Ячейка 2,2</td>
<td>Ячейка 2,3</td>
</tr>
<tr>
<td>Ячейка 3,1</td>
<td>Ячейка 3,2</td>
<td>Ячейка 3,3</td>
</tr>
</tbody>
</table>
В данном примере тег <thead> содержит одну строку (<tr>), в которой объявлены заголовки столбцов таблицы с помощью тега <th>.
Следующая часть таблицы, объявленная с помощью тега <tbody>, содержит основное содержимое таблицы.
Таким образом, при прокрутке страницы вверх шапка таблицы остается видимой, что позволяет заголовкам столбцов быть всегда в поле зрения пользователя.