DataTable header is not lining up when using scrollY. I'm not sure why it doing this.
Here is a minimal working example.
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>.dataTables_scrollHeadInner {
padding-left: 0px!important;
}
This might be a bug in https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js
Apparently the element somehow ends up with:
padding-left: 17px;
This could have something to do with the scroll bar.
The body>div style is interfering with the DataTable's <div> elements, which it creates and uses to wrap its table header.
You can see this for yourself by temporarily commenting out the body>div section of your style. You will also see that DataTables is adding a 17px padding to adjust the heading to allow for the width of the table body's scroll bar.
In the question, it mentions can't change these - in which case, you can force the issue by overriding the problematic style, by adding the following CSS:
div.dataTables_scrollHeadInner {
padding-left: 0 !important;
}
Using !important is the last resort - it can cause problems elsewhere (although I understand if it is acceptable in your scenario).
Ideally, it would be better to add class names to those <div> elements you do need to adjust, instead of using a blanket body > div selector, and then changing the stylesheet accordingly (the one which cannot be changed :-).