I feel like no css framework has really solved the problem of HTML tables.
Take this basic bootstrap table for example:
"Responsive" Tables On Mobile 🙄
Even the table-responsive class is hardly "responsive" it just makes the table scroll sideways off the screen. This is not an ideal solution.
My Alternative
I string together div's with col classes to make sure the interface responds well on mobile devices, so instead of scrolling offscreen, content flows into nice rows:
Codepen
Open this up and drag the preview window to get a gist of what I mean:
How does everyone else solve this problem?
I like my solution because it is one piece of code that carries into mobile and desktop, however it's just so incredibly verbose.
What CSS frameworks handle this well? How else have people solved this?
Top comments (2)
I saw this cool trick to make a table responsive.
It automatic and it only uses html and css
codepen.io/AllThingsSmitty/pen/MyqmdM
Nice! Damn, using the data labels like that for sure makes it less verbose. This is a great find, thanks!