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>

固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。

在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。

通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。