纯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 ;      } }