Стилизация таблиц современным CSS
Мишель Баркер показывает, как стилизовать таблицы, не меняя в них
-
-
- У таблиц есть
- Чтобы научить таблицу уважать задаваемые ширины колонок, нужно задать ей свойство
В конце статьи можно посмотреть готовый пример адаптивной таблицы с фиксируемой левой колонкой. Забавно, что раньше мы так и верстали почти всё, потому что это был довольно удобный способ контролировать вёрстку. А сейчас это уже знание древних.
https://piccalil.li/blog/styling-tables-the-modern-css-way/
Мишель Баркер показывает, как стилизовать таблицы, не меняя в них
display. Всё чаще вижу примеры, где таблицы переделывают на гриды, потому что так удобнее с ними работать и при необходимости переделывать на узких экранах в карточки. Но иногда таблицы — это просто таблицы.-
border-collapse: collapse схлопывает границы ячеек в одну общую.-
<thead> и <tfoot> — полезные элементы, чтобы выделить заголовочный ряд и ряд «Итого».- У таблиц есть
<caption> — подпись к таблице. И её можно двигать при помощи caption-side: bottom.- Чтобы научить таблицу уважать задаваемые ширины колонок, нужно задать ей свойство
table-layout: fixed.В конце статьи можно посмотреть готовый пример адаптивной таблицы с фиксируемой левой колонкой. Забавно, что раньше мы так и верстали почти всё, потому что это был довольно удобный способ контролировать вёрстку. А сейчас это уже знание древних.
https://piccalil.li/blog/styling-tables-the-modern-css-way/