Responsive tables, revisited | Lea Verou


42 bookmarks. First posted by nelson.menezes may 2018.


Many people have explored responsive tables. The usual idea is turning the table into key-value pairs so that cells become rows and there are only 2 columns total, which fit in any screen. However, this means table headers need to now be repeated for every row. The current ways to do that are:
Archive 
may 2018 by plouf
By Lea Verou - May 14, 2018
articles  tables  HTML  CSS  responsive 
may 2018 by mycotn
The usual idea is turning the table into key-value pairs so that cells become rows and there are only 2 columns total, which fit in any screen. So I wondered, is there any way to create it without duplicating content either in the markup or in the CSS? After a bit of thinking, I came up with two ways, each with their own pros and cons.
fridayfrontend  css  html  accessibility  responsive  tables 
may 2018 by spaceninja
Lea Verou даёт советы по вёрстке адаптивных таблиц.
UX  responsive  tables  coding  CSS  howto  issue  scripts 
may 2018 by jvetrau
techniques for achieving responsive table
webdesign  web  design  layout  responsive  table  flow  wrap  tables  css 
may 2018 by piperh
I just starred Responsive tables, revisited on Inoreader https://ift.tt/2jUJRMJ
Web  Development 
may 2018 by ninthart
I wrote up a quick blog post about these two new ways for doing responsive tables, as well as their pros and cons:
may 2018 by wesleythill
I wrote up a quick blog post about these two new ways for doing responsive tables, as well as their pros and cons:
may 2018 by leonbarnard
Lea Verou comes back to one of the more challenging issues we've had since the move from fixed desktop sites to the responsive world, the data table. There are a number of existing solutions which I think are covered really well with Table Saw (link to resource), but these are some interesting approaches that I've not seen before.
newslettered  309  tutorial  tables  news 
may 2018 by justinavery
Many people have explored responsive tables. The usual idea is turning the table into key-value pairs so that cells become rows and there are only 2 columns total, which fit in any screen. However, this means table headers need to now be repeated for every row. The current ways to do that are: via Pocket
Pocket 
may 2018 by LaptopHeaven
background: element(#header);
css  tricks 
may 2018 by oratnin
css for responsive tables - could come in handy!
responsiveTables  table  responsive 
may 2018 by ElliotPsyIT
RT : I wrote up a quick blog post about these two new ways for doing responsive tables, as well as their pros and cons:
from twitter
may 2018 by fjordaan
Lea Verou
IFTTT  Feedly  jh 
may 2018 by jonathanhaslett
I wrote up a quick blog post about these two new ways for doing responsive tables, as well as their pros and cons:
from twitter_favs
may 2018 by nelson.menezes