table表头和首列的表格固定-CSS实现的Table表头固定
2017-10-10 11:32
736 查看
版权声明:本文为博主原创文章,未经博主允许不得转载。效果就是上图 表头是固定的, 跟随滑动轴动,左边第一列也是可以跟谁滑动轴滚动 下面是代码原文是查看
<!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{ width:100px; float: left; } #left_div1{ width: 100%; } #left_div2{ margin-top:-20px; width: 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{ width: 100%; overflow: hidden; } #right_divx{ width: 900px; } #right_div2{ margin-top:-20px; width:100%; height:400px; overflow: auto; } #right_table1{ width: 880px; } #right_table2{ /**width和max-width一起写,手机浏览器打开也能固定长度**/ width: 880px; max-width: 880px; white-space:nowrap; } #right_table1 th{ background: #E9F8FF; text-align:center; width:10%; } #right_table2 td{ width: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"> <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> <th>我是表头</th> <th>我是表头</th> <th>我是表头</th> <th>我是表头</th> </tr> </table> </div> </div> <div id="right_div2"> <table id="right_table2" class="table table-bordered"> </table> </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; } //设置右边div宽度 document.getElementById("right_div").style.width=""+document.documentElement.clientWidth-130+"px"; setInterval(function() { document.getElementById("right_div").style.width=""+document.documentElement.clientWidth-130+"px"; }, 0); 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><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td></tr>"); } </script> </body> </html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141这句js 不要忘记加了
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;}//设置右边div宽度document.getElementById("right_div").style.width=""+document.documentElement.clientWidth-130+"px";setInterval(function() {document.getElementById("right_div").style.width=""+document.documentElement.clientWidth-130+"px";}, 0);123456789101112如果你遇到问题,可以加群315552185 一起交流哦!转自:http://blog.csdn.net/q3585914/article/details/69946478
相关文章推荐
- table表头和首列的表格固定-CSS实现的Table表头固定
- css固定table表头的实现代码可同时看到表头和表格底部
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- table表头和首列的表格固定-JQuery、js实现的Table表头固定
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- html table css 实现固定表头的办法
- css+js简单实现table固定首行首列
- 推荐:用CSS实现的固定表头的HTML表格
- js、css实现table表头固定
- 用CSS实现的固定表头的HTML表格
- 数据表格表头与首列固定的完全实现
- asp.net table表格表头及列固定实现
- css固定表格titile和首列的实现
- JS(JQ)实现table表格固定表头且表头可以随横向滚动而滚动
- CSS实现表头固定的表格
- CSS实现固定表头 HTML表格
- div+css实现表头固定内容滚动表格
- JS(JQ)实现table表格固定表头且表头可以随横向滚动而滚动
- JS实现table表格固定表头且表头随横向滚动而滚动
- CSS实现表格表头(thead)固定,内容(tbody)滚动