HTML table 表格 thead 表头固定 tbody 滚动

第一种方式实现第二种方式实现

第一种方式实现

#tableid>thead>tr{display: table;width: 100%;table-layout: fixed;}#tableid>tbody{display: block;height: 271px;overflow-y: scroll;}#tableid>tbody>tr{display: table;width: 100%;table-layout: fixed;}

第二种方式实现

【 表格数据量很多不建议使用 】

使用 js + css 实现

使用 js 拷贝 table 表格，一个表格显示 thead,一个表格显示 tbody

//thead 元素var thead=$("#tableid").clone();//克隆表格var div=document.createElement('div');//创建DIV 元素，作为显示thead的容器div.style.height='38px';//设置DIV元素高div.style.overflowY='hidden';//设置Y轴滚动条为隐藏thead.removeAttr('id');//删除表格ID，否则会重复IDthead.appendTo(div);//将克隆的表格添加到DIV元素$("#tableid").parent().prepend(div);//表格的父元素开头添加DIV元素// tbody 元素var div2=document.createElement('div');//作为显示tbody的容器var tbody=$("#tableid").clone();div2.style.maxHeight='500px';div2.style.overflowY='auto';tbody.children('thead').remove();tbody.appendTo(div2);$("#tableid").parent().append(div2);//表格的父元素结束添加DIV元素$("#tableid").remove();