jquery datatable設置垂直滾動后，表頭(th)錯位問題

問題描述：

我在datatable里設置：”scrollY”: ‘300px’,垂直滾動屬性后，表頭的寬度就會錯位，代碼如下：

<!-- HTML代碼 --> <table id="demo" class="table" cellspacing="0" width="100%"><thead class="the-box"><tr><th style="width: 50px;text-align: left;font-size: 13px; padding-left: 8px">表頭1</th><th style="width: 100px;text-align: left;font-size: 13px; padding-left: 8px">表頭2</th></tr></thead><tbody></tbody> </table> //加載表格 $('#demo').dataTable().fnDestroy(); $('#demo').dataTable({data: tableData, //json數據"bProcessing": true,//正在處理提示"scrollY": '300px', //支持垂直滾動"scrollCollapse": true,"paging": false,"columnDefs": [{ //數據渲染"render": function (data, type, row) {return '<div class="text-indentation-s" title="' + data + '">' + data + '</div>';},"targets": 0}, {//"visible": false,"render": function (data, type, row) {return '<div class="text-indentation-b" title="' + data + '">' + data + '</div>';},"targets": [1]}] });

效果：

解決方法：

給 table 設置一個樣式：table-layout:fixed (固定表格布局)：

<!-- HTML代碼 --> <table id="demo" class="table" style="table-layout:fixed" cellspacing="0" width="100%"><thead class="the-box"><tr><th style="width: 50px;text-align: left;font-size: 13px; padding-left: 8px">表頭1</th><th style="width: 100px;text-align: left;font-size: 13px; padding-left: 8px">表頭2</th></tr></thead><tbody></tbody> </table>

固定表格布局與自動表格布局相比，允許瀏覽器更快地對表格進行布局。
在固定表格布局中，水平布局僅取決于表格寬度、列寬度、表格邊框寬度、單元格間距，而與單元格的內容無關。
通過使用固定表格布局，用戶代理在接收到第一行后就可以顯示表格。

轉載于:https://www.cnblogs.com/rysinal/p/5834444.html

總結

以上是生活随笔為你收集整理的jquery datatable设置垂直滚动后，表头(th)错位问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。