CSS3响应式表格布局技巧
响应式设计的表格真是前端开发里一个老大难。表格一多，列一长，一到小屏幕上就全挤一块去了，用户体验直接下滑。不过用点 CSS3 的小技巧，就能让它在各种设备上都表现得还挺不错。
媒体查询是关键，用@media配合屏幕宽度来写不同的样式，像@media (max-width: 768px)，你就能专门搞一套适配手机的表格布局。
默认的表格布局在小屏上真不太友好，试试把 你要数据比较规整，那Grid也可以上，写个 有时候列太多，可以配合 样式方面也别偷懒，字体大小、颜色对比、边距这些都要调一下，别小屏上一堆字挤在一起，看都看不清。 还有个经验就是移动优先，你可以先写好适配手机的样式，再加上针对平板、桌面的样式，不容易出错。 别忘了测试！多用 如果你项目里有多设备展示的数据表格，不妨花点时间试试这些方法，效果比你想的还要好。那套换成
div + Flexbox或者Grid布局。比如用display: flex把单元格堆成一列，看着清爽多了：
.responsive-table {
display: flex;
flex-wrap: wrap;
}
.responsive-table td {
flex-basis: 100%;
}grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))，自适应地排列列宽，体验也挺流畅的。display: none和媒体查询，隐藏掉不那么重要的信息，只保留关键信息。要是想做得更复杂，甚至还能接点JavaScript，用个折叠展开效果。Chrome的设备模拟器看看效果，最好能在真机上点一点。你也可以参考这几个资源，代码直接下，改一改就能用：
