注：引入 bootstrap.css 和jq
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tab表格thead头部固定</title>
<link rel="stylesheet" href="style/bootstrap.css" />
</head>
<body>
<title>固定表头和首列的表格</title>
<style type="text/css">
#right_div1 {
width: 700px;
overflow: hidden;
}
#right_divx {
width: 700px;
}
#right_div2 {
margin-top: -20.6px;
width: 703px;
height: 300px;
overflow: auto;
}
#right_table1 {
width: 700px;
}
#right_table2 {
/**width和max-width一起写，手机浏览器打开也能固定长度**/
width: 700px;
max-width: 700px;
white-space: nowrap;
font-weight: bolder;
}
#right_table1 th {
background: #008396;
text-align: center;
width: 10%;
color: white;
}
#right_table2 td {
width: 12%;
text-align: center;
}
</style>
<div class="patientinfo">
<div class="container-fluid">
<div id="right_div">
<div id="right_div1">
<div id="right_divx">
<table id="right_table1" class="table table-bordered">
<tr>
<th>取号码</th>
<th>姓名</th>
<th>科室</th>
<th>医生</th>
<th>数据来源</th>
<th>病例</th>
</tr>
</table>
</div>
</div>
<div id="right_div2">
<table id="right_table2" class="table table-bordered">
<tr>
<td>1</td>
<td>xingming</td>
<td>骨科</td>
<td>周天</td>
<td>12</td>
<td class="checks">查看</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!--脚本-->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="./bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
//固定和滚动
var right_div2 = document.getElementById("right_div2");
right_div2.onscroll = function() {
var right_div2_top = this.scrollTop;
var right_div2_left = this.scrollLeft;
document.getElementById("left_div2").scrollTop = right_div2_top;
document.getElementById("right_div1").scrollLeft = right_div2_left;
}
for(var i = 0; i < 24; i++) {
$("#left_table2").append("<tr><th>我是首列</th></tr>");
$("#right_table2").append("<tr><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td></tr>");
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/fanting/p/9981480.html
时间： 2024-08-08 13:40:29