使用“scrollY”时无法让 DataTables 标题行对齐答案

【问题标题】：Unable to get DataTables header row to line up when using `scrollY`使用“scrollY”时无法让 DataTables 标题行对齐
【发布时间】：2022-01-02 01:02:01
【问题描述】：

使用scrollY 时，DataTable 标头未对齐。我不确定它为什么这样做。

这是一个最小的工作示例。

var dataSet = [
    {
        "id" : "001",
        "name" : "first last",
        "age" : "123"
    },
];

function doIt()
{
    // just to create some dummy rows
    for(var i = 0; i < 10; ++i)
    {
        dataSet = dataSet.concat(dataSet);
    }
    tbl = $('#userStories').DataTable({
        data: dataSet,
        columns: [
            {
                title: "ID",
                data: "id"
            },
            {
                title: "Name",
                data: "name"
            },
            {
                title: "Age",
                data: "age"
            }
        ],
        scrollY: "300px",
        scrollCollapse: true,
        paging: false,
        info: true,
    });
}

$(document).ready(doIt);

/* can't change these - start */
body>div {
    margin: 5px;
    padding: 5px 0;
    border-bottom: 1px solid black;
}
table {
    width: 100%;
}
table,
th,
td {
    border: 1px solid black;
    border-collapse: collapse;
}

th+th+th {
    width: 100%
}

textarea {
    width: 95%;
    height: 100px;
    background-color: #ffdddd;
}

input[type='button'],
input[type='submit'] {
    background-color: #ddddff;
}
/* can't change these - end*/

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    </head>
    <body>
        <div>select:<br><br><br>
            <div id="userStoriesWrapper">
                <table id="userStories" class="display" style="width:100%">
            </div>
        </div>
    </body>
</html>

【问题讨论】：

标签： javascript html jquery datatables

【解决方案1】：

.dataTables_scrollHeadInner {
    padding-left: 0px!important;
}

这可能是https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js 中的一个错误

显然该元素以某种方式结束： padding-left: 17px;

这可能与滚动条有关。

【讨论】：

这很好用。谢谢！
我赞成你的回答——但我不认为这是一个 DataTables 错误。在这种情况下，DataTables 需要调整其表头，因为表头是与包含正文的表分开的表（用于处理滚动）。因此，外部样式可以很容易地干扰这种结构（在这种情况下有很多关于未对齐标题的问题 - 通常是由于其他样式导致问题）。

【解决方案2】：

body>div 样式干扰了 DataTable 的 <div> 元素，它创建并使用它来包装其表头。

您可以通过暂时注释掉您样式中的body>div 部分来亲自查看这一点。您还将看到 DataTables 添加了一个17px 填充来调整标题以允许表格主体滚动条的宽度。

在问题中，它提到了can't change these - 在这种情况下，您可以通过添加以下 CSS 覆盖有问题的样式来强制解决问题：

div.dataTables_scrollHeadInner {
    padding-left: 0 !important;
}

使用!important 是最后的手段 - 它可能会在其他地方引起问题（尽管我知道在您的情况下它是否可以接受）。

理想情况下，最好将类名添加到您需要调整的<div> 元素，而不是使用一揽子body > div 选择器，然后相应地更改样式表（一个不能改变的:-)。

【讨论】：

这行得通。谢谢你的解释！