自适应的一个表格

在屏幕变小时可以自适应的表格怎么做呢？

总结一下就是，利用@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向右移，再从新给他加个表头