純CSS響應式Table

在 [1] 裡頭用一個有趣的手法來達成純CSS的響應式 Table. 把 th 欄位裡的資料，利用 HTML data屬性藏在每筆 td 旁，若是大螢幕的裝置則正常顯示 th 裡的資料，若是小螢幕裝置則把 th 隱藏起來，改成顯示藏在 td 旁的資料。

參考範例碼（改寫自 [1] ）：

HTML

<table>
  <thead>
    <tr>
      <th>標頭1</th>
      <th>標頭2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-header="標頭1">標頭1之資料1a</td>
      <td data-header="標頭2">標頭2之資料2a</td>
    </tr>
    <tr>
      <td data-header="標頭1">標頭1之資料1b</td>
      <td data-header="標頭2">標頭2之資料2b</td>
    </tr>
  </tbody>
</table>

CSS

@media screen and (max-width: 767px)
  table td:before {
    content: attr(data-header);
    float: left;
    text-transform: uppercase;
    font-weight: bold;
  }
}

參考：

[1]	(1, 2) Responsive Tables in Pure CSS - LivingSocial's Technology Blog (Hacker News討論)

[2]	html - How to make responsive table - Stack Overflow

[3]	Google搜尋 Responsive Tables in Pure CSS

[4]	DuckDuckGo搜尋 Responsive Tables in Pure CSS