本文介绍了一种使用纯CSS实现响应式表格的方法，该方法通过媒体查询调整表格布局，确保在小屏幕设备上也能清晰展示数据。
由于手机屏幕空间有限，太大的表格很难友好显示，本文介绍一种使用纯CSS实现响应式表格的方法，可以比较完美的在手机端显示。
在屏幕空间充足的情况下，我们可以将表格的每列都完全显式在屏幕上，但在手机下，每列内容会拥挤不堪，甚至出现横向滚动条，用户快速了解每条项目基本情况的效率会大打折扣。
一种优化方法是：使用media queries监测屏幕viewport小于568px时，让单元格(td)独占一行，每行(tr)相互隔离，如同每条项目为一独立的表格，如下图：
现在每条项目便于阅读了，但表头(th)与对应的单元格(td)隔离开了，单元格的具体意义难以理解。那么，隐藏掉表格的thead，单元格内容右对齐，在每个单元格前面插入对应的表头(th)即可解决这个问题，如下图：
伪元素(:before)结合att()表达式(获取伪元素所依附元素的HTML属性值)可完成此任务。当然，我们首先要对每个单元格(td)元素改造：
样式如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
扫一扫
467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
