手提式有线电话机版接纳 CSS 将横向表格调换来竖向显示

万生机勃勃三个报表有过多列,那么在手机版展现时,就不是很好查看(因为表格太宽),换生龙活虎种思路,看看下边包车型客车职能:

图片 1

全然不用退换 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]); } });

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website