在屏幕变小时可以自适应的表格怎么做呢?
总结一下就是,利用@media only screen(max-width:760px),(min-device-width:768px)and(max-device-width:1024px){
在这个里面设置当屏幕变小时的table表格的一些样式。就可以啦。
}
首先来写一个表格
<table class="table">
<thead>
<tr>
<th>姓名</th>
<th>班级</th>
<th>成绩</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小工</td>
<td>212</td>
<td>122</td>
<td>222</td>
<td>212</td>
<td>122</td>
</tr>
<tr>
<td>肖说</td>
<td>212</td>
<td>122</td>
<td>222</td>
<td>212</td>
<td>122</td>
</tr>
</tbody>
</table>
设置一些样式
.table{width:100%;border-collapse: collapse;}
.table th,.table td{border:1px solid #ccc;text-align: left;}
.table tr:nth-child(even){background-color:#efefef;}
这样显示的就是一个全屏的表格
@media only screen and (max-width:760px ),(min-device-width:768px)and(max-device-width:1024px) {
//让所有的元素都成为一行,块状元素
.table,thead,tbody,tr,th,td{
display:block;
}
//让表头不出现,位置移到了-9999px,肯定在屏幕上就看不到啦
thead tr{
position:absolute;
left:-9999px;
top:-9999px;
}
给td加个下边框,并且整体向右移动,这是为之后的重新写的th表头留下位置
td{
border-bottom:1px solid #ccc;
position:relative;
padding-left:50%;
}
利用before把因为已经移出屏幕的th,从新写一个加上去
td:nth-of-type(1):before { content: "姓名"; }
td:nth-of-type(2):before { content: "班级"; }
td:nth-of-type(3):before { content: "成绩"; }
td:nth-of-type(4):before { content: "语文"; }
td:nth-of-type(5):before { content: "数学"; }
td:nth-of-type(6):before { content: "英语"; }
设置这些th的位置
td:before{
position:absolute;
left:6px;
top:6px;
width:45%;
padding-right:10px;
white-space: nowrap;
}
}
总结下来就是所有表格内容显示成块状的一行行显示,表头移走不要啦,并把td向右移,再从新给他加个表头