纯CSS重构table表格使之响应式适应移动端

由于手机屏幕空间有限，太大的表格很难友好显示，本文介绍一种使用纯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

table {

    border: 1px solid #ccc;

    width: 100%;

    margin: 0;

    padding: 0;

    border-colla<a href="/fw/photo.html" target="_blank">ps</a>e: collapse;

    border-spacing: 0;

}

table tr {

    border: 1px solid #ddd;

    padding: 5px;

}

table th,

table td {

    padding: 10px;

    text-align: center;

}

table th {

    text-transform: uppercase;

    font-size: 14px;

    letter-spacing: 1px;

}

/* <= 568px */

@media screen and (max-width: 35.5em) {

    table {

        border: 0;

    }

    table thead {

        display: none;

    }

    table tr {

        margin-bottom: 10px;

        display: block;

        border-bottom: 2px solid #ddd;

    }

    table td {

        display: block;

        text-align: right;

        font-size: 13px;

        border-bottom: 1px dotted #ccc;

    }

    table td:last-child {

        border-bottom: 0;

    }

    table td:before {

        content: attr(data-label);

        float: left;

        text-transform: uppercase;

        font-weight: bold;

    }

}