用純CSS實現自適應布局表格

jopen 9年前發布 | 14K 次閱讀 CSS 前端技術

原文 http://www.webhek.com/responsive-tables-in-pure-css

以手機、平板等移動設備為平臺的瀏覽行為變得越來越平常，甚至有些人叫囂PC將死。雖然說的有些夸張，但讓你的網站布局能夠兼容PC和移動設備這些需求變得越來越重要。這種網頁布局就是“自適應布局” (有人喜歡把“Responsive layout”直譯成‘響應式布局’，本人覺得‘自適應布局’更本土化) 。這種布局的特點是使用CSS媒體查詢語句(@media screen and (...))，能根據頁面寬度，讓頁面布局自動做相應的調整，而不是采用傳統的做法，幾種不同的尺寸就做幾個相適應的頁面。

今天要說的是自適應布局技術中的一個難題，就是，如何讓table元素也能表現出自適應性。按HTML5的說法，table是一個不鼓勵使用的HTML標記，但現實工作中，我們避免不了的偶爾會用到它。那么，怎樣讓一個傳統的表格也表現出自適應性呢？

網上有很多種解決方案，最常見的是配合JavaScript。 css-tricks 里給出了一個用純CSS實現的，但它需要將一些業務數據寫在CSS里。而本文這將提到的一種方法也是用純CSS實現表格的自適應布局，而且CSS只負責表現，不牽涉業務邏輯和數據。

觀看演示

假設一種需求，用一個表格來展示付款數據。下面是我們使用的表格和數據：

<table>
  <thead>
    <tr>
      <th>支付</th>
      <th>日期</th>
      <th>金額</th>
      <th>周期</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="支付">支付 #1</td>
      <td data-label="日期">02/01/2015</td>
      <td data-label="金額">$2,311</td>
      <td data-label="周期">01/01/2015 - 01/31/2015</td>
    </tr>
    <tr>
      <td data-label="支付">支付 #2</td>
      <td data-label="日期">03/01/2015</td>
      <td data-label="金額">$3,211</td>
      <td data-label="周期">02/01/2015 - 02/28/2015</td>
    </tr>
  </tbody>
</table>

借助偽元素和自定義屬性

我們將借助偽元素:before和:after 的力量。通常，它們用顯示圖標類的內容，比如一個箭頭，提示，或文字圖案(icon)。它的另外一個神奇的功能是元素屬性值顯示到HTML內容里，content: attr(data-label)，放在before/after偽元素類里。沿著這個思路，我們就能夠讓table在PC端表現成網格效果，而在小屏的手機端表現成流式布局。

我們暫以600px為小屏幕大屏幕的分界點，下面的CSS使用媒體查詢語句，在小于600px寬的屏幕上，用CSS將td上的屬性值取出來，放到內容區顯示。

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

在大屏幕上的顯示效果是這樣：

用純CSS實現自適應布局表格