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

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

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

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

---