响应式多列数据表

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 $200 的免费积分!

来自 Filament Group 的 Maggie Costello Wachs 分享了迄今为止我见过的最佳响应式数据表方法。 请记住这个问题:在小屏幕设备上浏览大型数据表意味着大量水平和垂直滚动,这很糟糕。 她的解决方案包括使用 CSS 类将列标记为“必填”和“可选”,并在较小的屏幕尺寸下使用媒体查询隐藏可选列。 然后,为了保持所有数据的可访问性,提供一个(动态创建的)复选框下拉菜单以显示隐藏的可选列。

更新: 将链接更改为 Filament Groups 的“Tablesaw”,它是一个包含处理多种响应式表格技术的插件的集合。

直接链接 →