使用CSS使表響應

一種使表格在手機上漂亮顯示的實用方法

幾天前,我收到了警告Google Search Console。它在我有一張大桌子的頁面上檢測到移動可用性問題。

這是給我問題的表:

在移動設備上,它的渲染效果很差:

不好的用戶體驗,以及Google Search Console中的錯誤。如果有什麼我不想要的地方就是一個錯誤/警告。當我可以解決的時候就不行了。

Hugo,我使用的靜態網站生成器,只需添加一個<style>標記到降價文件中。便利。

因此,我開始尋找一種使表具有響應能力的好方法。我在CSS Tricks上看到了這篇非常不錯的文章:響應數據表。從2011年開始,仍然可以正常使用!

訣竅是這樣的:我們希望使表格顯示為一個塊元素,而不是傳統CSS意義上的表格。我們通過將所有表頭移出視圖來隱藏所有表頭,並在表中插入一個新塊,每一行將具有自己的一組表頭,如下所示:

這是實現上述設計的代碼:

@media
only screen and (max-width: 1500px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  tr { border: 1px solid #ccc; }
  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 200px;
    margin-left: 150px;
  }
  td:before {
    position: absolute;
    top: 12px;
    left: 6px;
    width: 200px;
    padding-right: 40px;
    white-space: nowrap;
    margin-left: -150px;
  }
  td:nth-of-type(1):before { content: "Option"; }
  td:nth-of-type(2):before { content: "Description"; }
  td:nth-of-type(3):before { content: "Type"; }
  td:nth-of-type(4):before { content: "Default";}
}

您需要自定義以使自己的表響應的重要事情是最後4行-您需要輸入每個“列”的標題,並且如果您有更多的列,則需要添加更多。或者,如果數量較少,請將其刪除。

另一件事是新“標題”將佔據每一行的空間。我加了一個150px邊距,則需要引用2次:一次為margin-left: 150px在裡面td,並作為margin-left: -150px在裡面td: before

最後,您需要確定何時啟動該新佈局。當頁面小於1500px時,我將其激活,因為該表很大。我也可以將其設置為默認行為,而不是在大屏幕上顯示普通表,但是到目前為止,我認為問題已解決。

我希望這有幫助。

免費下載我的CSS手冊


更多CSS教程: