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,965 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