2023年6月20日发(作者：)
HTMLtable表格thead表头固定，tbody滚动第⼀种⽅式实现1. 使⽤ css 样式设置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;}第⼆种⽅式实现【 表格数据量很多不建议使⽤ 】1. 使⽤ js + css 实现
1. 使⽤ js 拷贝 table 表格，⼀个表格显⽰ thead,⼀个表格显⽰ tbody//thead 元素var thead=$("#tableid").clone();//克隆表格var div=Element('div');//创建DIV 元素，作为显⽰thead的容器='38px';//设置DIV元素⾼owY='hidden';//设置Y轴滚动条为隐藏Attr('id');//删除表格ID，否则会重复To(div);//将克隆的表格添加到DIV元素$("#tableid").parent().prepend(div);//表格的⽗元素开头添加DIV元素// tbody 元素var div2=Element('div');//作为显⽰tbody的容器var tbody=$("#tableid").clone();ght='500px';owY='auto';en('thead').remove();To(div2);$("#tableid").parent().append(div2);//表格的⽗元素结束添加DIV元素$("#tableid").remove();
2023年6月20日发(作者：)
HTMLtable表格thead表头固定，tbody滚动第⼀种⽅式实现1. 使⽤ css 样式设置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;}第⼆种⽅式实现【 表格数据量很多不建议使⽤ 】1. 使⽤ js + css 实现
1. 使⽤ js 拷贝 table 表格，⼀个表格显⽰ thead,⼀个表格显⽰ tbody//thead 元素var thead=$("#tableid").clone();//克隆表格var div=Element('div');//创建DIV 元素，作为显⽰thead的容器='38px';//设置DIV元素⾼owY='hidden';//设置Y轴滚动条为隐藏Attr('id');//删除表格ID，否则会重复To(div);//将克隆的表格添加到DIV元素$("#tableid").parent().prepend(div);//表格的⽗元素开头添加DIV元素// tbody 元素var div2=Element('div');//作为显⽰tbody的容器var tbody=$("#tableid").clone();ght='500px';owY='auto';en('thead').remove();To(div2);$("#tableid").parent().append(div2);//表格的⽗元素结束添加DIV元素$("#tableid").remove();
发布评论