使用 `scrollY` 时无法让 DataTables header 行对齐

Question

DataTable header 在使用 scrollY 时未排队。我不确定为什么要这样做。

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

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>

Answer 1

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

这可能是 https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js

中的错误

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

这可能与滚动条有关。

Answer 2

body>div 样式干扰了 DataTable 的 <div> 元素，它创建并使用这些元素来包装其 table header.

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

在问题中，它提到了 can't change these - 在这种情况下，您可以通过添加以下 CSS:

覆盖有问题的样式来强制解决问题

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

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

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

使用 `scrollY` 时无法让 DataTables header 行对齐

Unable to get DataTables header row to line up when using `scrollY`

html

javascript

jquery

datatables