关于前端:超-Nice-的表格响应式布局小技巧

明天，遇到了一个很有意思的问题，一名群友问我，仅仅应用 CSS，是否实现这样一种响应式的布局成果：

简略解析一下成果：

1. 在屏幕视口较为宽时，体现为一个整体 Table 的款式
2. 而当屏幕视口宽度较小时，原 Table 的每一行数据独自拆分为一个 Table 进行展现

很有意思的一个响应式布局，让信息在小屏幕下失去了一种不错的展现。

那么，仅仅应用 CSS 的话，是否实现这样一个布局呢？答案是 能够的。

首先，必定会用到 媒体查问，这个不难看出。另外，咱们察看下拆分后的每一组数据：

都会存在一组本来整体一个 Table 时的表头信息，次要的难点就是在这里，咱们如何在拆分成一个一个的子 Table 展现时，同时展现这些表头信息？

根本构造的实现

首先，咱们先实现惯例宽屏下的 HTML 及对应的 CSS。

比较简单，这里没有什么非凡之处，应用 <table> 标签或者应用 div、ul 等标签进行模仿一个表格都能够。

<table>
  <caption>Lorem ipsum !</caption>
  <thead>
    <tr>
      <th>Account</th>
      <th>Due Date</th>
      <th>Amount</th>
      <th">Period</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Account">Visa - 3412</td>
      <td data-label="Due Date">04/01/2016</td>
      <td data-label="Amount">$1,190</td>
      <td data-label="Period">03/01/2016 - 03/31/2016</td>
    </tr>
    // ... 反复多组
  </tbody>
</table>

失去这样一个简略的 Table：

应用媒体查问将单个 Table 拆分成多个

下一步也很简略，设定适合的阈值（视理论业务状况而定），应用媒体查问将单个 Table 拆分成多个子 Table。

@media screen and (max-width: 600px) {
  table {border: 0;}  
  table thead {display: none;}
  table tr {
    display: block;
    margin-bottom: 10px;
  }
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
  }
}

这里做的事件也非常简单：

0. 利用媒体查问，设定屏幕宽度小于 600px 的款式
1. 去掉本来表格的 <thead> 表头，间接暗藏即可
2. 将本来的一行 <tr>，设置为 display: block，并且设置一个下边距，使之每一个离开
3. 将本来的一行内的 <td>，设置为 display: block，这样，它们就会竖向排列，使每一个 <tr> 造成新的一个子 table

好，这样，再屏幕宽度小于 600px 时，咱们就失去了这样一个 Table：

借助伪元素极其个性，实现表头信息展现

上面一步，也就是最为要害的一步，咱们如何在子 table 的每一行，也就是 <td> 内，再展现本来的表头信息呢？

这里其实也非常简单，只是简略的使用了伪元素，极其能够读取 HTML 标签属性的小个性实现。

咱们只须要简略革新一下代码，给每个 <td> 的 HTML，带上与之对应的表头列形容信息：

<table>
  // 上方信息保持一致
  <tbody>
    <tr>
      <td data-label="Account">Visa - 3412</td>
      <td data-label="Due Date">04/01/2016</td>
      <td data-label="Amount">$1,190</td>
      <td data-label="Period">03/01/2016 - 03/31/2016</td>
    </tr>
    <tr>
      <td scope="row" data-label="Account">Visa - 6076</td>
      <td data-label="Due Date">03/01/2016</td>
      <td data-label="Amount">$2,443</td>
      <td data-label="Period">02/01/2016 - 02/29/2016</td>
    </tr>
    // ... 每个 tr 进行同样的解决
  </tbody>
</table>

接着，借助 td 的伪元素，实现表头信息的展现即可：

@media screen and (max-width: 600px) {
  // ... 保持一致
  table td {
    position: relative;
    display: block;
    text-align: right;
  }
  table td::before {
    position: absolute;
    left: 10px;
    righht: 0;
    content: attr(data-label);
  }
}

这里，咱们外围的知识点就是利用了元素的伪元素能够在 content 属性里，读取其 HTML 元素内的属性内容，并进行展现的知识点。这样，咱们在小屏幕下，就失去了这样一种成果：

残缺的成果，即如题图所示：

残缺的 DEMO，你能够戳这里：CodePen Demo — Simple Responsive Table in CSS

最初

十分小的一个技巧，你学会了吗？本文到此结束，心愿对你有帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。