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

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>

CodePudding user response：

.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.

CodePudding user response：

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 :-).