原生table表頭固定標題垂直滾動
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
需求場景
最終實現效果
解決思路1. 通過粘性布局`position: sticky;`實現表頭固定 2. 給祖先級別元素設置滾動 - 給table設置垂直滾動寬度`width:100%`，結果會發現表格內部不能夠撐開100%，設置`height:200px;overflow-y: auto;`能實現垂直方向上的滾動 - 此時建議給table外部增加一個父元素，給其設置`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滾動優化</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> 運行效果：
該文章在 2023/8/29 14:21:14 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
