使用bootstrap框架实现内容滚动条滚动显示表格table固定表头
实现效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a1ab7ae0f3e70220df67cdc44ecf32c5.png)
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="js/bootstrap-3.3.0-dist/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
<script type="text/javascript" src="js/bootstrap-3.3.0-dist/dist/js/bootstrap.min.js" ></script>
<style>
table th,td{
width: 100px;
}
#testTable{
width:600px;
margin:0px auto;
}
#testTable thead{
display:block;
overflow-y: scroll;
}
#testTable tbody{
display:block;
max-height:150px;
overflow-y: scroll;
}
</style>
<script>
$(function(){
$("#testTable").find("tbody td").css("border-top","none");
});
</script>
</head>
<body>
<table id="testTable" class="table table-bordered">
<thead>
<tr>
<th>表头一</th>
<th>表头二</th>
<th>表头三</th>
<th>表头四</th>
<th>表头五</th>
<th>表头六</th>
</tr>
</thead>
<tbody>
<tr>
<td>qipa250一</td>
<td>qipa250二</td>
<td>qipa250三</td>
<td>qipa250四</td>
<td>qipa250五</td>
<td>qipa250六</td>
</tr>
<tr>
<td>qipa250一</td>
<td>qipa250二</td>
<td>qipa250三</td>
<td>qipa250四</td>
<td>qipa250五</td>
<td>qipa250六</td>
</tr>
<tr>
<td>qipa250一</td>
<td>qipa250二</td>
<td>qipa250三</td>
<td>qipa250四</td>
<td>qipa250五</td>
<td>qipa250六</td>
</tr>
<tr>
<td>qipa250一</td>
<td>qipa250二</td>
<td>qipa250三</td>
<td>qipa250四</td>
<td>qipa250五</td>
<td>qipa250六</td>
</tr>
<tr>
<td>qipa250一</td>
<td>qipa250二</td>
<td>qipa250三</td>
<td>qipa250四</td>
<td>qipa250五</td>
<td>qipa250六</td>
</tr>
<tr>
<td>qipa250一</td>
<td>qipa250二</td>
<td>qipa250三</td>
<td>qipa250四</td>
<td>qipa250五</td>
<td>qipa250六</td>
</tr><tr>
<td>qipa250一</td>
<td>qipa250二</td>
<td>qipa250三</td>
<td>qipa250四</td>
<td>qipa250五</td>
<td>qipa250六</td>
</tr><tr>
<td>qipa250一</td>
<td>qipa250二</td>
<td>qipa250三</td>
<td>qipa250四</td>
<td>qipa250五</td>
<td>qipa250六</td>
</tr><tr>
<td>qipa250一</td>
<td>qipa250二</td>
<td>qipa250三</td>
<td>qipa250四</td>
<td>qipa250五</td>
<td>qipa250六</td>
</tr><tr>
<td>qipa250一</td>
<td>qipa250二</td>
<td>qipa250三</td>
<td>qipa250四</td>
<td>qipa250五</td>
<td>qipa250六</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>