table最终版IE(浏览器中宽度不起作用)
tbody{position:absolute;}
给table_div加边框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="../main.css"/> <title></title> <style> .main{width: 50%;float: left;height: 500px;padding: 10px;} .table_div{width: 100%;float: left;overflow: auto;} .table_div>.table_{table-layout:fixed;width: 100%;height:100%;position: relative;} .table_div>.table_>thead{position: absolute;overflow: hidden;min-width: 100%;} .table_div>.table_>thead>tr{background-color: #F2F2F2;} .table_div>.table_>tbody{display: block;min-height:10px;position: absolute;} .table_div>.table_>thead ~ tbody{height: calc(100% - 30px);margin-top: 30px;} .table_ tr{display:inline-flex;line-height: 30px;min-width:100%} .table_ th,.table_ td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:30px;float:left;font-weight: normal;text-align: left;text-indent: 7px;} .table_ th,.table_ td{border-top: 1px solid #E6E6E6;border-left: 1px solid #E6E6E6;} .table_ tbody>tr:last-of-type td{border-bottom: 1px solid #E6E6E6;} .table_ tr th:last-of-type,.table_ tr td:last-of-type{border-right: 1px solid #E6E6E6;} .fenye{width: 100%;height: 40px;float: left;background-color: #fff;} .fenye>.fenye_xs{float: left;color: #999;line-height:40px;} .fenye>.fenye_xs>span{color: #999;} .fenye>.fenye_div{float: right;} .fenye>.fenye_div>ul{float: right;border-radius: 5px;overflow: hidden;margin-top:2px} .fenye>.fenye_div>ul>li{color: #999;padding:0 10px;line-height: 30px; float: right;text-align: center;} .fenye>.fenye_div>ul>li:not(:last-of-type){cursor:pointer;} .fenye>.fenye_div>ul>li:not(:last-of-type):hover{color:#3493E5;text-decoration: underline;} .fenye>.fenye_div>ul>li>span{padding: 0 10px;} .table_ th,.table_ td{width:120px;} </style> </head> <body> <div class="main"> <div class="table_div" style="height: calc(100% - 40px);"> <table class="table_"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>电话</th> <th>微信</th> <th>QQ</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>电话</th> <th>微信</th> <th>QQ</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> </tr> <tr> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> </tr> <tr> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> </tr> <tr> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> </tr> <tr> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> </tr> <tr> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> </tr> <tr> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> </tr> <tr> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> </tr> <tr> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> </tr> <tr> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> </tr> <tr> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> </tr> <tr> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> </tr> <tr> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> </tr> <tr> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> </tr> <tr> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> </tr> <tr> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> <td>张三</td> <td>男</td> <td>22</td> <td>18698598989</td> <td>nizalaobuxign</td> <td>2442851525</td> </tr> </tbody> </table> </div> <div class="fenye"> <div class="fenye_xs">显示1-10,共<span>170</span>项</div> <div class="fenye_div"> <ul> <li>尾页</li> <li>下一页</li> <li>上一页</li> <li>首页</li> <li>第<span>1</span>/<span>10</span>页</li> </ul> </div> </div> </div> </body> </html>