My Problem with HTML Tables

#html #css #frontend

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?

Serverless Postgres in 300ms (!)

10 free databases with autoscaling, scale-to-zero, and read replicas. Start building without infrastructure headaches. No credit card needed.

Try for Free →

Top comments (2)

MrAnyx • Aug 22 '20

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

John Jacob • Aug 22 '20

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

🚀 Stellar Dev Diaries Series: Episode 1 is LIVE!

Ever wondered what it takes to build a web3 startup from scratch? In the Stellar Dev Diaries series, we follow the journey of a team of developers building on the Stellar Network as they go from hackathon win to getting funded and launching on mainnet.