超好看的表格响应式布局小技巧

今天遇到一个很有意思的问题。有群友问我只用CSS能不能实现这样的响应式布局效果：简单分析下效果：当屏幕视口比较宽时，整体呈现为Table样式。当屏幕视口宽度较小时，将原Table中的每一行数据拆分成一个Table进行显示。一个有趣的响应式布局，允许信息显示在一个小屏幕上，显示效果很好。那么，是否可以仅使用CSS来实现这样的布局呢？答案是肯定的。首先，肯定会用到媒体查询，这一点不难看出。另外，我们观察拆分后的每组数据：当有一个完整的Table时，会有一组表头信息。这里的主要难点在于我们如何将它一个一个地拆分成子表。显示标题信息？基本结构的实现首先，我们先实现常规宽屏下的HTML和相应的CSS。比较简单，这里没什么特别的，可以用

标签或者用div、ul等标签模拟一个表格。PeriodVisa-341204/01/20161,19003/01/2016-03/31/2016//...重复多组

Loremipsum!

Account	DueDate	Amount

得到这样一个简单的Table：使用mediaquery将单个Table拆分成多个接下来的步骤也很简单，设置合适的阈值（根据实际业务而定）situation），使用媒体查询将单个表拆分为多个子表。@mediascreenand(max-width:600px){table{border:0;}表thead{显示：无；}表tr{显示：块；底部边距：10px；}tabletd{border-bottom:1pxsolid#ddd;显示：块；这里做的也很简单：使用媒体查询，设置屏幕宽度小于600px的样式，去掉原表的表头，直接隐藏原行，设置todisplay:block，并设置一个bottommargin将原行中的每个分开，设置为display:block，这样它们就会垂直排列，这样每个最好形成一个新的子表。这样，当屏幕宽度小于600px时，我们得到这样一个Table：借助伪元素及其特性，下一步，也就是最关键的一步，要实现表头信息显示，怎么做我们在子表的每一行，也就是中，显示原始表头信息呢？这里其实很简单，就是简单的使用伪元素，通过一个可以读取HTML标签属性的小特性就可以实现。我们只需要简单的修改代码，给每个HTML加上相应的header列描述信息：//上面的信息是一致的Visa-341204/01/20161,19003/01/2016-03/31/2016Visa-607603/01/20162,44302/01/2016-02/29/2016//...每个tr都用同样的方式处理然后，借助td伪元素，可以显示表头信息：@mediascreenand(max-width:600px){//...保持一致tabletd{position:relative;显示：块；文本对齐：右；}tabletd::before{位置：绝对；左：10px；右：0；内容：属性（数据标签）；}}这里，我们的核心知识点是利用元素的伪元素，在content属性中读取HTML元素中的属性内容，并展示知识点。假设一个HTML标签定义为：那么如果给div对应的伪元素设置content:attr(data-msg)，就可以读取到data-msg的值，相当于内容：“ABC”。这样，我们就可以得到它有这样一个效果：完整的效果，如题图所示：完整的DEMO，可以点击这里：CodePenDemo--SimpleResponsiveTableinCSS[1]上一个这个功能伪元素其实可以应用于日常效果的地方很多，之前在很多文章中也有提到。一个非常小的技巧，你学会了吗？本文到此结束，希望对你有所帮助。