Loading video...

Video Failed to Load

Go Home

Responsive HTML table with sticky columns and mobile view created using only CSS and HTML ✨ CodePen link below 👇

385,849 views • 2 years ago •via X (Twitter)

10 Comments

Viki ✨'s profile picture
Viki ✨2 years ago

Here's that CodePen link:

Baird's profile picture
Baird2 years ago

On the xs scale make each row collapsing. Should just show checkbox and name of user. Then it should have an expandable button to see other column data. That’s my preference.

Viki ✨'s profile picture
Viki ✨2 years ago

It's a good idea, thank you 😊

Rob DiMarzo's profile picture
Rob DiMarzo2 years ago

Incredible work! The container table (max-width: 400px) { td::before { content: attr(data-label); } } is an excellent touch 👏

Daniel Cranney 🇬🇧's profile picture
Daniel Cranney 🇬🇧2 years ago

Great work on making a tricky task easy 🙌 tables can be so awkward so this is brilliant!

vitaly's profile picture
vitaly2 years ago

Responsive tables are always a pain for a developer. So I like this solution, maybe the headache will be less. You should make a CSS library for tables like this

Code With Mercy's profile picture
Code With Mercy2 years ago

This is beautiful 🤩 love it 😍

Emmanuel uzoezie's profile picture
Emmanuel uzoezie2 years ago

Fantastic build 👏

ByeWind's profile picture
ByeWind2 years ago

This is great, but it must be a lot of code, right?

Viki ✨'s profile picture
Viki ✨2 years ago

No, about 20 additional lines of CSS

Related Videos