DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
John Jacob
John Jacob

Posted on

My Problem with HTML Tables

I feel like no css framework has really solved the problem of HTML tables.

Take this basic bootstrap table for example:

Alt Text

"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.

Alt Text

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:

Alt Text

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)

Collapse
 
mranyx profile image
MrAnyx

I saw this cool trick to make a table responsive.
It automatic and it only uses html and css
codepen.io/AllThingsSmitty/pen/MyqmdM

Collapse
 
johnsalzarulo profile image
John Jacob Author

Nice! Damn, using the data labels like that for sure makes it less verbose. This is a great find, thanks!

🌚 Life is too short to browse without dark mode