§ ITPOW >> 文档 >> CSS

作者：vkvi 来源：ITPOW（原创） 日期：2019-7-4

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

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

<style type="text/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; } </style> <table class="gridView"> <tr class="tr_h"> <th>ID</th> <th>姓名</th> <th>学号</th> <th>班级</th> <th>语文</th> <th>数学</th> </tr> <tr> <td data-label="ID">1</td> <td data-label="姓名">张三</td> <td data-label="学号">1</td> <td data-label="班级">1.3班</td> <td data-label="语文">99</td> <td data-label="数学">100</td> </tr> <tr> <td data-label="ID">2</td> <td data-label="姓名">李四</td> <td data-label="学号">2</td> <td data-label="班级">1.3班</td> <td data-label="语文">100</td> <td data-label="数学">100</td> </tr> </table>

关键 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; }

在 ASP.NET 中，为 GridView 赋 data-label 这个自定义属性比较麻烦，可以用 jQuery 轻松解决，而且它是在执行之后，CSS 再去获取它，并不是 CSS 在前。

// 为 gridView 的 td 添加 data-label，便于自适应时显示字段头 var gridViewThTexts = []; $(".gridView tbody th").each(function () { gridViewThTexts.push($(this).text()); }); $(".gridView tbody tr").each(function () { var gridViewTds = $(this).find("td"); for (var i = 0; i < gridViewTds.length; i++) { $(gridViewTds[i]).attr("data-label", gridViewThTexts[i]); } });