假如一个表格有很多列,那么在手机版显示时,就不是很好查看(因为表格太宽),换一种思路,看看下面的效果:
完全不用改动 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; }
关键 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; }
在 中,为 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]);
}
});