原生table表頭固定標(biāo)題垂直滾動(dòng)
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
需求場(chǎng)景
最終實(shí)現(xiàn)效果
解決思路1. 通過(guò)粘性布局`position: sticky;`實(shí)現(xiàn)表頭固定 2. 給祖先級(jí)別元素設(shè)置滾動(dòng) - 給table設(shè)置垂直滾動(dòng)寬度`width:100%`，結(jié)果會(huì)發(fā)現(xiàn)表格內(nèi)部不能夠撐開(kāi)100%，設(shè)置`height:200px;overflow-y: auto;`能實(shí)現(xiàn)垂直方向上的滾動(dòng) - 此時(shí)建議給table外部增加一個(gè)父元素，給其設(shè)置`overflow-y: auto;width:100%;height:200px;`完美解決 代碼參考：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生Table滾動(dòng)優(yōu)化</title> <style> .table-box { height: 200px; display: block; overflow-y: auto; border: 1px solid red; } .scroll-table{ width: 100%; overflow-x: auto; text-align: center; } .scroll-table thead{ position: sticky; top: 0; z-index: 3; line-height: 30px; background-color: #ddd; } .scroll-table th,.scroll-table td{ min-width: 110px; border: 1px solid red; } </style> </head> <body>
<div class="table-box"> <table class="scroll-table"> <thead> <tr> </tr> </thead> <tbody> </tbody> </table> </div> <script> const allTables = document.queryselectorAll("table"); let theadHtml = '', hbodyHtml='', tbodyTr = '' for(let i = 0;i<15;i++){ theadHtml+=`<th>表頭th-${i}</th>` hbodyHtml+=`<td>表頭td-${i}</td>` } for(let i = 0;i<25;i++){ tbodyTr+= `<tr>${hbodyHtml}</tr>` } document.queryselector('thead tr').innerHTML = theadHtml document.queryselector('tbody').innerHTML = tbodyTr </script> </body> </html> 運(yùn)行效果：
該文章在 2023/8/29 14:21:14 編輯過(guò) |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
