滚动表格固定表头和左边栏
效果如下:
思路:
在表格外面套一个相对定位标签,
在该标签内再复制两个绝对定位的表格,一个作为固定头部,一个作为固定左边栏,
再在该标签内添加一个放在左上角的标签,宽高与第一个td相同
当表格滚动的时候固定头部和左边栏的表格也跟着同步滚动(通过获取和设置scrollLeft和scrollTop)
示例代码如下:
CSS:
.containt{text-align:center; padding:20px;} .containt-table{position:relative; overflow:hidden; width:500px; height:500px; margin: auto; background:lightblue;} table{border-collapse:collapse;} table td{border:1px solid #ddd; padding:15px;} .tbody{overflow:auto; width:100%; height:100%;} .thead{position:absolute; overflow:hidden; top:0; left:0; border-bottom:1px solid #ddd; background: lightsalmon;} .tleft{position:absolute; overflow:hidden; left:0; top:0; border-right:1px solid #ddd; background: lightgray} .td{position:absolute; top:0; left:0; background:lightblue; border-bottom:1px solid #ddd;}
HTML:
<div class="containt"> <h2>我的图表一</h2> <div class="containt-table"> <!-- 表格 --> <div class="tbody" onscroll="thead.scrollLeft=this.scrollLeft;tleft.scrollTop=this.scrollTop;"> <table class="table"></table> </div> <!-- 固定表头 --> <div class="thead"> <table class="table-header"></table> </div> <!-- 固定左边栏 --> <div class="tleft"> <table class="table-lefter"></table> </div> <!-- 固定左上角表格 --> <div class="td"></div> </div> </div>
JS:
var thead = document.getElementsByClassName(\'thead\')[0]; var tleft = document.getElementsByClassName(\'tleft\')[0]; window.onload = function(){ var tbody = document.getElementsByClassName(\'tbody\')[0]; var table = tbody.getElementsByClassName(\'table\')[0]; var table_thead = thead.getElementsByClassName(\'table-header\')[0]; var table_left = tleft.getElementsByClassName(\'table-lefter\')[0]; var fixed_td = document.getElementsByClassName(\'td\')[0]; //示例表格数据 var data = { \'\': [\'第一列\',\'第二列\',\'第三列\',\'第四列\',\'第五列\',\'第六列\',\'第七列\',\'第八列\',\'第九列\',\'第十列\',\'第十一列\'], \'第一行\': [\'1,1\',\'1,2\',\'1,3\',\'1,4\',\'1,5\',\'1,6\',\'1,7\',\'1,8\',\'1,9\',\'1,10\',\'1,11\'], \'第二行\': [\'2,1\',\'2,2\',\'2,3\',\'2,4\',\'2,5\',\'2,6\',\'2,7\',\'2,8\',\'2,9\',\'2,10\',\'2,11\'], \'第三行\': [\'3,1\',\'3,2\',\'3,3\',\'3,4\',\'3,5\',\'3,6\',\'3,7\',\'3,8\',\'3,9\',\'3,10\',\'3,11\'], \'第四行\': [\'4,1\',\'4,2\',\'4,3\',\'4,4\',\'4,5\',\'4,6\',\'4,7\',\'4,8\',\'4,9\',\'4,10\',\'4,11\'], \'第五行\': [\'5,1\',\'5,2\',\'5,3\',\'5,4\',\'5,5\',\'5,6\',\'5,7\',\'5,8\',\'5,9\',\'5,10\',\'5,11\'], \'第六行\': [\'6,1\',\'6,2\',\'6,3\',\'6,4\',\'6,5\',\'6,6\',\'6,7\',\'6,8\',\'6,9\',\'6,10\',\'6,11\'], \'第七行\': [\'7,1\',\'7,2\',\'7,3\',\'7,4\',\'7,5\',\'7,6\',\'7,7\',\'7,8\',\'7,9\',\'7,10\',\'7,11\'], \'第八行\': [\'8,1\',\'8,2\',\'8,3\',\'8,4\',\'8,5\',\'8,6\',\'8,7\',\'8,8\',\'8,9\',\'8,10\',\'8,11\'], \'第九行\': [\'9,1\',\'9,2\',\'9,3\',\'9,4\',\'9,5\',\'9,6\',\'9,7\',\'9,8\',\'9,9\',\'9,10\',\'9,11\'], \'第十行\': [\'10,1\',\'10,2\',\'10,3\',\'10,4\',\'10,5\',\'10,6\',\'10,7\',\'10,8\',\'10,9\',\'10,10\',\'10,11\'], \'第十一行\': [\'11,1\',\'11,2\',\'11,3\',\'11,4\',\'11,5\',\'11,6\',\'11,7\',\'11,8\',\'11,9\',\'11,10\',\'11,11\'], \'第十二行\': [\'12,1\',\'12,2\',\'12,3\',\'12,4\',\'12,5\',\'12,6\',\'12,7\',\'12,8\',\'12,9\',\'12,10\',\'12,11\'], \'第十三行\': [\'13,1\',\'13,2\',\'13,3\',\'13,4\',\'13,5\',\'13,6\',\'13,7\',\'13,8\',\'13,9\',\'13,10\',\'13,11\'], \'第十四行\': [\'14,1\',\'14,2\',\'14,3\',\'14,4\',\'14,5\',\'14,6\',\'14,7\',\'14,8\',\'14,9\',\'14,10\',\'14,11\'], \'第十五行\': [\'15,1\',\'15,2\',\'15,3\',\'15,4\',\'15,5\',\'15,6\',\'15,7\',\'15,8\',\'15,9\',\'15,10\',\'15,11\'], \'第十六行\': [\'16,1\',\'16,2\',\'16,3\',\'16,4\',\'16,5\',\'16,6\',\'16,7\',\'16,8\',\'16,9\',\'16,10\',\'16,11\'], \'第十七行\': [\'17,1\',\'17,2\',\'17,3\',\'17,4\',\'17,5\',\'17,6\',\'17,7\',\'17,8\',\'17,9\',\'17,10\',\'17,11\'] } var rows = \'\'; for(var key in data){ rows += \'<tr>\ <td>\' + key + \'</td>\'; var row = data[key]; row.forEach(function(i){ rows += \'<td>\' + i + \'</td>\'; }) rows += \'</tr>\' } table.innerHTML = rows; table_thead.innerHTML = rows; table_left.innerHTML = rows; //获取第一个td的宽高 var td = table.getElementsByTagName(\'td\')[0]; var height = td.offsetHeight + \'px\'; var width = td.offsetWidth + \'px\'; //设置固定表头显示的宽高 thead.style.width = tbody.clientWidth+\'px\'; thead.style.height = height; //设置固定左边栏显示的宽高 tleft.style.width = width; tleft.style.height = tbody.clientHeight + \'px\'; //设置左上角固定标签的宽高 fixed_td.style.width = width; fixed_td.style.height = height; }
在线演示:http://sandbox.runjs.cn/show/lcbhykwr