使⽤bootstrap框架实现内容滚动条滚动显⽰表格table固定表头使⽤bootstrap框架实现内容滚动条滚动显⽰表格table固定表头
实现效果
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>
</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>
<td>qipa250六</td>
jquery框架使用</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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。