TGViewer
mefody.dev mefody.dev @mefody_dev · 5.39K subscribers
Post #208 5.32K
Стилизация таблиц современным CSS

Мишель Баркер показывает, как стилизовать таблицы, не меняя в них display. Всё чаще вижу примеры, где таблицы переделывают на гриды, потому что так удобнее с ними работать и при необходимости переделывать на узких экранах в карточки. Но иногда таблицы — это просто таблицы.

- border-collapse: collapse схлопывает границы ячеек в одну общую.
- <thead> и <tfoot> — полезные элементы, чтобы выделить заголовочный ряд и ряд «Итого».
- У таблиц есть <caption> — подпись к таблице. И её можно двигать при помощи caption-side: bottom.
- Чтобы научить таблицу уважать задаваемые ширины колонок, нужно задать ей свойство table-layout: fixed.

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

https://piccalil.li/blog/styling-tables-the-modern-css-way/
Piccalilli Styling Tables the Modern CSS Way Modern CSS makes styling HTML tables in a considered, responsive nature a breeze. Michelle Barker breaks it all down for you in this deep dive.
  • 👍 43
  • ❤‍🔥 4
More from @mefody_dev
  1. Sep 25, 2026Эффект одометра Люблю такие демки, когда на чистом CSS делают что-то необычное, для чего я…
  2. Sep 23, 2026Цена ошибок гидрации В React есть много ухищрений, чтобы серверный кусок страницы обновилс…
  3. Sep 16, 2026Какие анимации более производительные: CSS или JS? Лучше пару раз увидеть, чем много откуд…
  4. Sep 14, 2026Единица измерения lh Если коротко, то 1lh = 1 line height. И это не размер шрифта, который…
  5. Sep 11, 2026<mermaid-element> Ещё одна полезная библиотека. Брамус собрал кастомный элемент, которому…
  6. Sep 10, 2026MicroLighter Дейв Руперт собрал маленькую библиотечку, которая делает подсветку кода. «Ещё…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →