bootstrap的table表头固定tbody滚动

来源：互联网发布：用友软件合同编辑：程序博客网时间：2024/05/13 19:17
<!DOCTYPE html><html><head><title></title><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><script type="text/javascript" src="js/bootstrap.min.js"></script><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script src="iscroll.js"></script></head><body><div id="con" class="container"><div id="2">  <table class="table table-bordered scrolltable"><thead style="display:block;overflow-y: scroll;border-bottom:1px solid #eee;"><tr><th>栏目一</th><th>栏目二</th><th>栏目三</th><th>栏目一</th><th>栏目二</th><th>栏目三</th></tr></thead><tbody style="display:block; max-height:200px;overflow-y: scroll;"><tr><td>星期一</td><td>星期二</td><td>星期三</td><td>星期一</td><td>星期二</td><td>星期三</td></tr><tr><td>星期一</td><td>星期二</td><td>星期三</td><td>星期一</td><td>星期二</td><td>星期三</td></tr><tr><td>星期一</td><td>星期二</td><td>星期三</td><td>星期一</td><td>星期二</td><td>星期三</td></tr><tr><td>星期一</td><td>星期二</td><td>星期三</td><td>星期一</td><td>星期二</td><td>星期三</td></tr><tr><td>星期一</td><td>星期二</td><td>星期三</td><td>星期一</td><td>星期二</td><td>星期三</td></tr><tr><td>星期一</td><td>星期二</td><td>星期三</td><td>星期一</td><td>星期二</td><td>星期三</td></tr><tr><td>星期一</td><td>星期二</td><td>星期三</td><td>星期一</td><td>星期二</td><td>星期三</td></tr><tr><td>星期一</td><td>星期二</td><td>星期三</td><td>星期一</td><td>星期二</td><td>星期三</td></tr></tbody></table></div></div></body><script type="text/javascript">$(document).ready(function(){var _width=$('#2').width();$('#2 th:first-child').width(_width*0.1);$('#2 td:first-child').width(_width*0.1);$('#2 th:nth-child(2)').width(_width*0.2);$('#2 td:nth-child(2)').width(_width*0.2);$('#2 th:nth-child(3)').width(_width*0.3);$('#2 td:nth-child(3)').width(_width*0.3);$('#2 th:nth-child(4)').width(_width*0.1);$('#2 td:nth-child(4)').width(_width*0.1);$('#2 th:nth-child(5)').width(_width*0.1);$('#2 td:nth-child(5)').width(_width*0.1);$('#2 th:nth-child(6)').width(_width*0.2);$('#2 td:nth-child(6)').width(_width*0.2);})</script></html>
0 0