Tab表格thead頭部固定（demo)
阿新 • • 發佈：2018-11-19
注：引入 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>