#ссылка дня
Казалось бы, что может быть проще 100%? Но это не совсем так.
От чего рассчитываются 100%? Как говорят англоязычные, it depends. По-русски – “зависит от”. Косноязычно как-то, но уж как есть.
В общем, держите прекрасный интерактивный пост от Амелии Ваттенбергер: https://wattenberger.com/blog/css-percents
Красиво, удобно, понятно.
#css #percent #width #height #position
Казалось бы, что может быть проще 100%? Но это не совсем так.
От чего рассчитываются 100%? Как говорят англоязычные, it depends. По-русски – “зависит от”. Косноязычно как-то, но уж как есть.
В общем, держите прекрасный интерактивный пост от Амелии Ваттенбергер: https://wattenberger.com/blog/css-percents
Красиво, удобно, понятно.
#css #percent #width #height #position
#статья дня
Казалось бы, что может быть проще 100%? Но это не совсем так.
От чего рассчитываются 100%? Как говорят англоязычные, it depends. По-русски – “зависит от”. Косноязычно как-то, но уж как есть.
В общем, держите прекрасный интерактивный пост от Амелии Ваттенбергер: https://wattenberger.com/blog/css-percents
Красиво, удобно, понятно.
#css #percent #width #height #position #бородач
Казалось бы, что может быть проще 100%? Но это не совсем так.
От чего рассчитываются 100%? Как говорят англоязычные, it depends. По-русски – “зависит от”. Косноязычно как-то, но уж как есть.
В общем, держите прекрасный интерактивный пост от Амелии Ваттенбергер: https://wattenberger.com/blog/css-percents
Красиво, удобно, понятно.
#css #percent #width #height #position #бородач
👍13🤩2
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Применяя
Вот только есть одна проблема: последняя строка таблицы при скролле скрывается под этим самым заголовком и выглядит это, ну, странно. Особенно в случае, когда в таблице не просто текст, а условия сравнения, изображения и так далее.
А решение простое!
Добавляем
Обратите внимание,
Да, совсем не очевидно, зато выглядит таблица теперь бомбически: https://codepen.io/alinaki/pen/JojeGMY?editors=0100
#table #sticky #position
Применяя
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