HTML table 表格 thead 表頭固定,tbody 滾動
阿新 • • 發佈:2019-01-29
第一種方式實現
- 使用 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 ;
}
第二種方式實現
【 表格資料量很多不建議使用 】
- 使用 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,否則會重複ID
thead.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();