Размещено: 2023-12-15 16:25:26

Теги: html, css

КАК СДЕЛАТЬ, ЧТО БЫ ВЕРХНЯЯ СТРОЧКА ТАБЛИЦЫ ОСТАВАЛАСЬ ПРИ ПРОКРУТКЕ

Как сделать, что бы шапка таблицы не уезжала при прокрутке. Для длинных таблиц очень неудобно, когда шапка - заголовок thead уезжает и непонятно к какому столбцу относится то или иное значение. При этом если сделать position: fixed, то ширина строки заголовка сужается и все становится нечитаемым. Самый простой способ сделать фиксированный заголовок таблицы при прокрутке:

thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #ffd4b6;
}

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


На эту страницу чаще всего попадают по запросам: fixed, table, thead, css, position, зафиксировать шапку таблицы, шапка в таблице, прокрутка, статичная шапка, фиксированная, table fixed th