? ? 在手机竖屏和PAD端表格显示的自适应处理，摘自《高性能HTML5》
? ? 复制粘贴就可以看效果哦。d
? ??
<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.table ul,.table li{
padding:0;
margin:0;
list-style:none;
}
.table{
display:table;
}
.tr{
display:table-row;
}
.td{
display:table-cell;
}
.table,.tr,.td{
border:1px solid #ccc;
border-collapse:collapse;
}
.tableTreatment1{
width:800px;
-webkit-box-shadow:2px 2px 2px #999999;
-moz-box-shadow:2px 2px 2px #999999;
box-shadow:2px 2px 2px #999999;
}
.tableTreatment1 .first{
background:#c8dfff;
font-weight:bold;
}
.tableTreatment2{
width:320px;
}
.tableTreatment2 .table,.tableTreatment2 .tr,.tableTreatment2 .td{
border:none;
}
.tableTreatment2 .tableHead{
display:none;
}
.tableTreatment2 .tr{
width:200px;
}
.tableTreatment2 .td{
display:block;
float:none;
padding:5px;
}
.tableTreatment2 .td:first-child{
color:white;
font-weight:bold;
text-shadow:0 0 3px #333;
background:#aebcbf;
}
.tableTreatment2 .td:before{
content:attr(data-colhead)":";
font-weight:bold;
color:#777;
}
.tableTreatment2 .td:first-child:before{
content:"";
}
@media only screen and (max-width:767px){
.tableTreatment1{
width:320px;
}
.tableTreatment1 .table,.tableTreatment1 .tr,.tableTreatment1 .td{
border:none;
}
.tableTreatment1 .tableHead{
display:none;
}
.tableTreatment1 .tr{
width:200px;
}
.tableTreatment1 .td{
display:block;
float:none;
padding:5px;
}
.tableTreatment1 .td:first-child{
color:white;
font-weight:bold;
text-shadow:0 0 3px #333;
background:#aebcbf;
}
.tableTreatment1 .td:before{
content:attr(data-colhead) ": ";
font-weight:bold;
color:#777;
}
.tableTreatment1 .td:first-child:before{
content:"";
}
}
</style>
</head>
<body>
<div class="table tableTreatment1">
<ul class="tr tableHead">
<li class="td" data-colhead=""></li>
<li class="td" data-colhead="The Head">
The head
</li>
<li class="td" data-colhead="B">
B
</li>
<li class="td" data-colhead="C">
C
</li>
<li class="td" data-colhead="D">
D
</li>
<li class="td" data-colhead="E">
E
</li>
</ul>
<ul class="tr tableBody">
<li class="td first" data-colhead="">
0000
</li>
<li class="td" data-colhead="The Head">
The head a
</li>
<li class="td" data-colhead="B">
BBBBBBB
</li>
<li class="td" data-colhead="C">
CCCCCCC
</li>
<li class="td" data-colhead="D">
DDDDDDD
</li>
<li class="td" data-colhead="E">
EEEEEEE
</li>
</ul>
<ul class="tr tableBody">
<li class="td first" data-colhead="">
111111
</li>
<li class="td" data-colhead="The Head">
The head a
</li>
<li class="td" data-colhead="B">
BBBBBBB
</li>
<li class="td" data-colhead="C">
CCCCCCC
</li>
<li class="td" data-colhead="D">
DDDDDDD
</li>
<li class="td" data-colhead="E">
EEEEEEE
</li>
</ul>
<ul class="tr tableBody">
<li class="td first" data-colhead="">
22222
</li>
<li class="td" data-colhead="The Head">
The head a
</li>
<li class="td" data-colhead="B">
BBBBBBB
</li>
<li class="td" data-colhead="C">
CCCCCCC
</li>
<li class="td" data-colhead="D">
DDDDDDD
</li>
<li class="td" data-colhead="E">
EEEEEEE
</li>
</ul>
</div>
</body>
</html>
?
原文：http://zhangzhaoaaa.iteye.com/blog/2185380