使用CSS創建響應式表格

本文我們將了解如何在響應式布局中使用表格，以及如何使這些表格在移動設備上同樣可用。

在響應式布局中使用表格，你將可能面臨以下問題：

• 列數太多
• 單元格內容溢出
• 列寬太小
• 若行數很多，滾動查看表格標題比較困難

在這里有希望用CSS響應式開發解決以上問題。

首先創建一個響應式測試用例，下面是IMDB排名前五的電影列表。

<table>

  <thead>

  <tr>

    <th>Movie</th>

    <th>Release Date</th>

    <th>IMDB Rating</th>

    <th>Director</th>

    <th>Staring</th>

  </tr>

  </thead>

  <tr>

    <td data-title="Movie">The Shawshank Redemption</td>

    <td data-title="Release Date">1994</td>

    <td data-title="IMDB Rating">9.3/10</td>

    <td data-title="Director">Frank Darabont</td>

    <td data-title="Staring">Tim Robbins, Morgan Freeman, Bob Gunton</td>

  </tr>

  <tr>

    <td data-title="Movie">The Godfather</td>

    <td data-title="Release Date">1972</td>

    <td data-title="IMDB Rating">9.2/10</td>

    <td data-title="Director">Francis Ford Coppola</td>

    <td data-title="Staring">Marlon Brando, Al Pacino, James Caan</td>

  </tr>

  <tr>

    <td data-title="Movie">The Godfather: Part II</td>

    <td data-title="Release Date">1975</td>

    <td data-title="IMDB Rating">9/10</td>

    <td data-title="Director">Francis Ford Coppola</td>

    <td data-title="Staring">Al Pacino, Robert De Niro, Robert Duvall</td>

  </tr>

  <tr>

    <td data-title="Movie">The Dark Knight</td>

    <td data-title="Release Date">2008</td>

    <td data-title="IMDB Rating">9/10</td>

    <td data-title="Director">Christopher Nolan</td>

    <td data-title="Staring">Christian Bale, Heath Ledger, Aaron Eckhart</td>

  </tr>

  <tr>

    <td data-title="Movie">Schindler's List </td>

    <td data-title="Release Date">1993</td>

    <td data-title="IMDB Rating">8.9/10</td>

    <td data-title="Director">Steven Spielberg</td>

    <td data-title="Staring">Liam Neeson, Ralph Fiennes, Ben Kingsley</td>

  </tr>

</table>

你會意識到這是一個普通的表格，只對td標簽添加了一個自定義屬性以便響應式表格使用。

因為在CSS中可使用偽類:before,:after展示一個HTML屬性的內容。

用移動設備查看上面的表格，看起來應該是這樣：

可見表格在移動設備上並非完全可用，最后一列很多內容無法正確閱讀。

所以我們使用媒體查詢功能實現響應式表格。

 

首先定義媒體查詢，即在移動設備上使用：

@media screen and (max-width: 320px) 

{

    // Style the table on mobile devices

}

 

然后是改變表格樣式以適應移動設備。

移除標題，改為和表格內容在同一行展示：

table thead 

{

    display: none;

}

 

由於將單元格水平排列改為豎直排列，故為行與行之間添加間距：

table tr 

{

    margin-bottom: 10px;

    display: block;

    border-bottom: 2px solid #ddd;

}

 

設置td標簽的display屬性為block，這樣才能實現上下排列的效果。

同時設置文本內容為右對齊，為左面的標題預備空間：

table td 

{

    display: block;

    text-align: right;

    font-size: 13px;

    border-bottom: 1px dotted #ccc;

}

table td:last-child 

{

    border-bottom: 0;

}

 

現在使用before偽類向單元格添加內容，即data-title自定義屬性的內容：

table td:before 

{

    content: attr(data-title);

    float: left;

    text-transform: uppercase;

    font-weight: bold;

}

 

以下是創建響應式表格完整的CSS代碼：

@media screen and (max-width: 320px) 

{

    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-title);

      float: left;

      text-transform: uppercase;

      font-weight: bold;

    }

}

 

注：本文為譯文。

原文鏈接： https://dzone.com/articles/css3-responsive-tables

下面附有我的demo鏈接，感興趣的朋友們可以看看。

demo鏈接： http://codepen.io/panshijie205/pen/GNqREx