表格html适应手机端,纯CSS实现响应式表格适应移动端

由于手机屏幕空间有限，太大的表格很难友好显示，本文介绍一种使用纯CSS实现响应式表格的方法，可以比较完美的在手机端显示。

在屏幕空间充足的情况下，我们可以将表格的每列都完全显式在屏幕上，但在手机下，每列内容会拥挤不堪，甚至出现横向滚动条，用户快速了解每条项目基本情况的效率会大打折扣。

一种优化方法是：使用media queries监测屏幕viewport小于568px时，让单元格(td)独占一行，每行(tr)相互隔离，如同每条项目为一独立的表格，如下图：

现在每条项目便于阅读了，但表头(th)与对应的单元格(td)隔离开了，单元格的具体意义难以理解。那么，隐藏掉表格的thead，单元格内容右对齐，在每个单元格前面插入对应的表头(th)即可解决这个问题，如下图：

伪元素(:before)结合att()表达式(获取伪元素所依附元素的HTML属性值)可完成此任务。当然，我们首先要对每个单元格(td)元素改造：

样式如下：

table {      border: 1px solid #ccc;      width: 100%;      margin: 0;      padding: 0;      border-collapse: 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;      }  }

大功告成了吗?某些屏幕阅读器(如OSX 和iOS下voiceOver)可朗读伪类插入的内容，这 是否造成了过度提示，会不会影响屏幕阅读器用户的访问效率。而某些屏幕阅读器与浏览器的组合又不会朗读，如何优化呢?