使用“scrollY”时无法获取 DataTables header 行以对齐

Question

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

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

 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>元素，它创建并使用它来包装其表 header。

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

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

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

使用!important是最后的手段-它可能会在其他地方引起问题（尽管我了解它在您的场景中是否可以接受）。

理想情况下，最好将 class 名称添加到您确实需要调整的那些<div>元素中，而不是使用一揽子body > div选择器，然后相应地更改样式表（无法更改的样式表：-）。

使用“scrollY”时无法获取 DataTables header 行以对齐

问题描述

2 个解决方案

解决方案1
0 2021-11-23 14:35:21

解决方案2
0 2021-11-23 16:45:39

使用“scrollY”时无法获取 DataTables header 行以对齐

问题描述

2 个解决方案

解决方案1 0 2021-11-23 14:35:21

解决方案2 0 2021-11-23 16:45:39

解决方案1
0 2021-11-23 14:35:21

解决方案2
0 2021-11-23 16:45:39