正在加载视频...

视频加载失败

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

385,849 次观看 • 2 年前 •via X (Twitter)

10 条评论

Viki ✨ 的头像
Viki ✨2 年前

Here's that CodePen link:

Baird 的头像
Baird2 年前

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 ✨ 的头像
Viki ✨2 年前

It's a good idea, thank you 😊

Rob DiMarzo 的头像
Rob DiMarzo2 年前

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

Daniel Cranney 🇬🇧 的头像
Daniel Cranney 🇬🇧2 年前

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

vitaly 的头像
vitaly2 年前

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 的头像
Code With Mercy2 年前

This is beautiful 🤩 love it 😍

Emmanuel uzoezie 的头像
Emmanuel uzoezie2 年前

Fantastic build 👏

ByeWind 的头像
ByeWind2 年前

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

Viki ✨ 的头像
Viki ✨2 年前

No, about 20 additional lines of CSS

相关视频