css 表單頭部固定

時間 2019-12-08

標籤 css 表單頭部固定欄目 CSS 简体版

原文原文鏈接

原創 https://blog.csdn.net/q3585914/article/details/69946478javascript

table表頭和首列的表格固定-CSS實現的Table表頭固定

原創 2017年04月10日 14:06:21

標籤：
固定表頭 /
css /
html

效果就是上圖表頭是固定的，
跟隨滑動軸動，左邊第一列也是能夠跟誰滑動軸滾動
下面是代碼原文是查看css

<!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>

這句js 不要忘記加了html

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);