html列表横向变纵向,手机版利用 CSS 将横向表格转换成竖向列表显示

假如一个表格有很多列，那么在手机版显示时，就不是很好查看(因为表格太宽)，换一种思路，看看下面的效果：

完全不用改动 HTML，纯 CSS 即可实现，代码如下：

.gridView { width:200px; border:0; }

.gridView .tr_h { display:none; }

.gridView tr { display:block; border-bottom:10px solid #eee; }

.gridView tr:last-of-type { border-bottom:0; }

.gridView td { display:block; height:auto; border-bottom:1px dotted #f2f2f2; text-align:right; line-height:34px; }

.gridView td:last-of-type { border-bottom:0; }

.gridView td:before { content:attr(data-label); float:left; font-weight:bold; }

ID	姓名	学号	班级	语文	数学
1	张三	1	1.3班