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

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>

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