Создание фиксированного (sticky) заголовка таблицы с помощью только CSS является вполне простой задачей и может быть выполнено с использованием свойства position: sticky;. Это свойство позволяет элементу оставаться на месте при прокрутке, пока он не достигнет определенной позиции в пределах родительского блока.

Пример кода

Рассмотрим простой пример реализации фиксированного заголовка таблицы:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Фиксированный заголовок таблицы</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 10px;
            border: 1px solid #ccc;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
            position: sticky;
            top: 0; /* Устанавливаем расстояние от верхней части родительского элемента */
            z-index: 1; /* Убедимся, что заголовок будет сверху остальных элементов при прокрутке */
        }

        tbody {
            display: block;
            max-height: 200px; /* Задаем максимальную высоту для нотировки прокрутки */
            overflow-y: auto; /* Включаем вертикальную прокрутку */
            width: 100%;
        }
        
        tr {
            display: table;
            width: 100%;
            table-layout: fixed; /* Задаем фиксированную раскладку для поддержки ширины столбцов */
        }
    </style>
</head>
<body>

<h2>Пример таблицы с фиксированным заголовком</h2>

<div style="overflow-x: auto;">
    <table>
        <thead>
            <tr>
                <th>Имя</th>
                <th>Возраст</th>
                <th>Город</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Иван</td>
                <td>25</td>
                <td>Москва</td>
            </tr>
            <tr>
                <td>Анна</td>
                <td>30</td>
                <td>Санкт-Петербург</td>
            </tr>
            <tr>
                <td>Петр</td>
                <td>27</td>
                <td>Казань</td>
            </tr>
            <tr>
                <td>Светлана</td>
                <td>22</td>
                <td>Новосибирск</td>
            </tr>
            <tr>
                <td>Дмитрий</td>
                <td>35</td>
                <td>Екатеринбург</td>
            </tr>
            <tr>
                <td>Ольга</td>
                <td>29</td>
                <td>Уфа</td>
            </tr>
            <tr>
                <td>Максим</td>
                <td>33</td>
                <td>Нижний Новгород</td>
            </tr>
            <tr>
                <td>Елена</td>
                <td>31</td>
                <td>Челябинск</td>
            </tr>
            <tr>
                <td>Алексей</td>
                <td>28</td>
                <td>Воронеж</td>
            </tr>
        </tbody>
    </table>
</div>

</body>
</html>

Объяснение кода:

Свойство position: sticky;: Это свойство необходимо для заголовков таблицы (<th>). Когда элемент с position: sticky; попадает в зону видимости «прилипающего» контейнера, он «прилипает» к верхней части этого контейнера по мере прокрутки.
Свойство top: 0;: Устанавливает верхнее смещение для «прилипших» элементов. В данном случае, заголовок будет оставаться у верхней части окна просмотра.
Свойство z-index: 1;: Позволяет заголовку оставаться над другими элементами при прокрутке.
Использование <tbody> с display: block;: Это необходимо для создания вертикальной прокрутки в таблице, что ограничивает высоту видимого содержимого.

Данный пример демонстрирует, как можно создать фиксированный заголовок таблицы при помощи CSS, и его легко адаптировать под свои нужды. Теперь, когда вы знаете, как это сделать, попробуйте настроить таблицу для других случаев использования!

Предыдущий вопрос

Как создать "липкую" сайдбар, который прокручивается с контентом в CSS?

Следующий вопрос

Как стилизовать SVG?

Содержание:

Объяснение кода:

Редактировать