• Страница 1 из 1
  • 1
Форум » Web-Раздел » Верстка веб-сайта » Таблица HTML с фиксированным заголовком (Таблица из столбцов и строк с липким заголовком на странице)
Таблица HTML с фиксированным заголовком
Kosten
Дата: Пятница, 2019-12-06, 21:50 | Сообщение 1
Оффлайн
Администраторы
Сообщений:29347
Награды: 62


В этой статье описана тема, этот как создать таблицу 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 на соответствующих сторонах.

Демонстрация
Прикрепления: 8450042.png(17.2 Kb) · sanydsin.zip(1.5 Kb)
Страна: (RU)
Форум » Web-Раздел » Верстка веб-сайта » Таблица HTML с фиксированным заголовком (Таблица из столбцов и строк с липким заголовком на странице)
  • Страница 1 из 1
  • 1
Поиск: