純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)可朗讀偽類插入的內容，這 是否造成了過度提示，會不會影響螢幕助讀程式使用者的訪問效率。而某些螢幕助讀程式與瀏覽器的組合又不會朗讀，如何最佳化呢?