使用“scrollY”时无法让 DataTables 标题行对齐
Posted
技术标签:
【中文标题】使用“scrollY”时无法让 DataTables 标题行对齐【英文标题】：Unable to get DataTables header row to line up when using `scrollY` 【发布时间】：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>【问题讨论】：
【参考方案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 选择器，然后相应地更改样式表（一个不能改变的:-)。
【讨论】：
这行得通。谢谢你的解释！以上是关于使用“scrollY”时无法让 DataTables 标题行对齐的主要内容，如果未能解决你的问题，请参考以下文章
JQuery DataTable 标头未与 ScrollY 和服务器端处理对齐
使用 Google Chrome 启用 scrollX 或 scrollY 时，数据表中出现重复的空标题