#фишка дня

Применяя position: sticky к заголовку таблицы, мы получам прекрасную и понятную реализацию прилипшего заголовка.

Вот только есть одна проблема: последняя строка таблицы при скролле скрывается под этим самым заголовком и выглядит это, ну, странно. Особенно в случае, когда в таблице не просто текст, а условия сравнения, изображения и так далее.

А решение простое!

Добавляем margin-bottom на thead размером во всю высоту строки:

margin-bottom: calc(1lh + 20px);

Обратите внимание, 1lh — это буквально единица измерения, позволяющая обратиться к значению интерлиньяжа, aka высоте строки. Ну а складывать удавов с попугаями мы умели всегда.

Да, совсем не очевидно, зато выглядит таблица теперь бомбически: https://codepen.io/alinaki/pen/JojeGMY?editors=0100

#table #sticky #position