原创 https://blog.csdn.net/q3585914/article/details/69946478
table表头和首列的表格固定-CSS实现的Table表头固定
效果就是上图 表头是固定的,
跟随滑动轴动,左边第一列也是可以跟谁滑动轴滚动
下面是代码原文是查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="jack">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,
user-scalable=no" />
<!-- 适应手机屏幕,防止屏幕缩放 -->
<!--样式-->
<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
</head>
<body>
<title>固定表头和首列的表格</title>
<style type="text/css">
#left_div{
100px;
float: left;
}
#left_div1{
100%;
}
#left_div2{
margin-top:-20px;
100%;
height: 400px;
overflow: hidden;
}
#left_table1 th{
background: #E9F8FF;
text-align:center;
}
#left_table2 th{
text-align:center;
}
#right_div{
float: left;
}
#right_div1{
100%;
overflow: hidden;
}
#right_divx{
900px;
}
#right_div2{
margin-top:-20px;
100%;
height:400px;
overflow: auto;
}
#right_table1{
880px;
}
#right_table2{
/**width和max-width一起写,手机浏览器打开也能固定长度**/
880px;
max- 880px;
white-space:nowrap;
}
#right_table1 th{
background: #E9F8FF;
text-align:center;
10%;
}
#right_table2 td{
10%;
text-align:center;
}
</style>
<div class="container-fluid">
<div id="left_div">
<div id="left_div1">
<table id="left_table1" class="table table-bordered">
<tr>
<th>我不会动</th>
</tr>
</table>
</div>
<div id="left_div2">
<table id="left_table2" class="table table-bordered">
</table>
</div>
</div>
<div id="right_div">