js+css實現table首行首列的凍結效果。

這個方案是把表格分為4塊，首行首列不可滑動，利用onscroll 動態根據內容設置凍結首行首列內容。

html

<div id="left_div"><div id="left_div1"><table id="left_table1"><tbody><tr><th>左上</th><th>左上</th></tr></tbody></table></div><div id="left_div2"><table id="left_table2"><tbody><tr><th>首列</th><th>首列</th></tr></tbody></table></div> </div> <div id="right_div"><div id="right_div1"><div id="right_divx"><table id="right_table1"><tbody><tr><th>首行標題</th><th>首行標題</th><th>首行標題</th></tr></tbody></table></div></div><div id="right_div2"><table id="right_table2"><tbody><tr><th>內容</th><th>內容</th><th>內容</th></tr></tbody></table></div> </div>

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

css

td{width: 100px; } #left_div{width:200px;float: left; } #left_div1{width: 100%; } #left_div2{width: 100%;height: 100px;overflow: hidden; } #right_div{width: 600px;float: left; } #right_div1{width: 100%;overflow: hidden; } #right_divx{width: 820px; } #right_div2{width:100%;height:120px;overflow: auto; } #right_table1{width: 800px; } #right_table2{width: 800px; }

總結

以上是生活随笔為你收集整理的js实现表格首行首列固定滑动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。