table给tbody设置滚动条
table结构例子:
<table class="layui-table"> <thead> <tr> <th> 贷款项目 </th> <th> 贷款类型 </th> <th> 所属公司 </th> <th> 产品联系人 </th> <th> 是否上线 </th> <th> 联系电话 </th> <th> 点击量(详情) </th> <th> 访问量(详情) </th> <th> 点击量(申请) </th> <th> 访问量(申请) </th> <th> 点击量(子页面) </th> <th> 访问量(子页面) </th> </tr> </thead> <tbody id="x-img"> </tbody> <tfoot> <tr style="background: #f2f2f2;"> <td >总计:</td> <td align="center">——</td> <td align="center">——</td> <td align="center">——</td> <td align="center">——</td> <td align="center">——</td> <td class="djCount1"></td> <td class="fwCount1"></td> <td class="djCount"></td> <td class="fwCount"></td> <td class="djCount3"></td> <td class="fwCount3"></td> </tr> </tfoot> </table>
css如下:
table tbody {
display:block;
max-height:500px;
overflow-y:scroll;
overflow-x:hidden;
}
::-webkit-scrollbar {
width: 1px;
}
table thead,tbody tr,tfoot tr,thead tr {
display:table;
width:100%;
table-layout:fixed;
}