共计 2240 个字符，预计需要花费 6 分钟才能阅读完成。
明天，遇到了一个很有意思的问题，一名群友问我，仅仅应用 CSS，是否实现这样一种响应式的布局成果：
简略解析一下成果：
- 在屏幕视口较为宽时，体现为一个整体 Table 的款式
- 而当屏幕视口宽度较小时，原 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;
}
}这里做的事件也非常简单：
- 利用媒体查问，设定屏幕宽度小于
600px的款式 - 去掉本来表格的
<thead>表头，间接暗藏即可 - 将本来的一行
<tr>，设置为display: block，并且设置一个下边距，使之每一个离开 - 将本来的一行内的
<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 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。