使用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