Как сделать таблицу с закреплённым заголовком в CSS.
Чтобы сделать заголовок таблицы липким/фиксированным, вам нужно настроить таргетинг на ячейки заголовка и использовать значение «липкой» позиции вместе с цветом фона:
th { /* header cell */
position: sticky;
top: 0;
background-color: #F9F8F8;
}
Если заголовок таблицы имеет рамку, вы должны применить ее к ячейкам заголовка и установить значение table border-collapse равным separate:
table {
border-collapse: separate;
border-spacing: 0;
}
th {
position: sticky;
top: 0;
background-color: #F9F8F8;
border-bottom: 2px solid #EB9486;
}
Живая демонстрация:
Такую таблицу я использовал на сайте Санатория - курорта имени В.И.Чапаева, где можно увидеть удобство как в компьютере, так и в смартфоне!
Надеюсь Вам понравилась!
