Будни разработчика@htmlshit P.3521

Notice: file_put_contents(): Write of 1848 bytes failed with errno=28 No space left on device in /var/www/tgoop/post.php on line 50

Warning: file_put_contents(): Only 16384 of 18232 bytes written, possibly out of free disk space in /var/www/tgoop/post.php on line 50
Будни разработчика@htmlshit P.3521

HTMLSHIT Telegram 3521

Будни разработчика

This media is not supported in your browser

VIEW IN TELEGRAM

#фишка дня

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

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

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

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


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

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

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

#table #sticky #position

👍51❤12

www.tgoop.com/htmlshit/3521

3.04K viewsSergey Bekharsky, Mar 31 at 11:30

tgoop.com/htmlshit/3521

Create: 2025-03-31
Last Update: 2025-12-01 23:11:25

#фишка дня

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

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

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

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


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

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

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

#table #sticky #position

BY Будни разработчика

Share with your friend now:
tgoop.com/htmlshit/3521

Open in Telegram

Telegram News

Date: 2025-12-01|

Private channels are only accessible to subscribers and don’t appear in public searches. To join a private channel, you need to receive a link from the owner (administrator). A private channel is an excellent solution for companies and teams. You can also use this type of channel to write down personal notes, reflections, etc. By the way, you can make your private channel public at any moment. Read now The SUCK Channel on Telegram, with a message saying some content has been removed by the police. Photo: Telegram screenshot. Done! Now you’re the proud owner of a Telegram channel. The next step is to set up and customize your channel. The visual aspect of channels is very critical. In fact, design is the first thing that a potential subscriber pays attention to, even though unconsciously.
from us

Telegram Будни разработчика
FROM American