Sticky header в html таблице

Не думал, что в 2025 мне понадобятся таблицы на сайте, как и ручная вёрстка при наличии нейросетей. Но есть у html-таблиц очень полезное свойство: при увеличении ширины ячейки становится шире весь столбец.

Красота: столбец сам тянется под содержимое Столбец «Сompaund» растёт по ширине, когда цены растут

В одном из моих проектов нужно было именно такое поведение. При этом хотелось зафиксировать шапку, чтобы при прокрутке она всегда оставалась наверху.

thead th {
    position: sticky;
    top: 0;
}

И вот тут начались сюрпризы не в виде торта…

Текст заголовка остался, а оформление уехало

Добавим background-color и посмотрим, что будет теперь.

thead th {
    position: sticky;
    top: 0;
    background-color: white;
}

Третья gif Границы заголовка некрасиво «рвутся» при прокрутке

Оказалось, это достаточно известная проблема и есть изящное (как мне казалось) решение: добавить к ячейкам заголовка псевдоклассы :before и :after, применив к ним определённую комбинацию свойств и покрасив границы.

th:after, th:before {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
}

th:after {
    right: -1px;
    border-right: 1px solid #ddd;
    bottom: -1px;
    border-bottom: 1px solid #ddd;
}

th:before {
    left: -1px;
    border-left: 1px solid #ddd;
    top: -1px;
    border-top: 1px solid #ddd;
}

четвертая gif Границы шапки не уезжают, но не совпадают с границами таблицы

Можно продолжит костылить, но особенность в том, что проблемы нет, если поменять стиль границ таблицы:

table {
    border-collapse: collapse;
}

Правда появились двойные границы ячеек, что тоже не очень подходит.

Пятая gif Шапка не рвётся, но теперь таблица выглядит не очень модно

table {
    border-collapse: collapse;
}

Убираем интервалы между ячейками и получаем красивую таблицу с толстыми границами (1px + 1px = 2px).

table {
    border-spacing: 0;
}

Шестая gif Двойные ~~стандарты~~ границы

Кстати, если поставить ширину линии 0.5px, проблему мы решим, но только на дисплеях retina. Поэтому попробуем другой способ, который пришёл, можно сказать, во сне: покрасим границы выборочно. Но так, чтобы в сумме покрасить всю таблицу. Пока (для наглядности) разными цветами:

table {
    border-left: 1px solid red;
}

thead th {
    background-color: white;
    border-top: 1px solid green;
}

th, td {
    border-right: 1px solid blue;
    border-bottom: 1px solid orange;
}

Седьмая gif Идеальные границы, хоть и весёлые

А теперь одним:

table {
    border-left: 1px solid #ddd;
}

thead th {
    background-color: white;
    border-top: 1px solid #ddd;
}

th, td {
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

Восьмая gif Идеальная таблица

Всё, теперь с чувством душевного спокойствия переходим к следующей задаче.

#webdev