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

imthenachoman

DataTable header is not lining up when using scrollY. I'm not sure why it doing this.

https://codepen.io/imthenachoman/pen/bGryxga

allan

Some of the custom CSS is causing problems. For example:

th + th + th {
    width: 100%;
}

which would mean the third column takes 100% width, which doesn't quite make sense, is triggering our right-to-left layout, which is interesting in itself.

With stripped back CSS it works okay: https://codepen.io/imthenachoman/pen/bGryxga

Allan

allan

Sorry - I forgot CodePen doesn't save automatically. This is the modified CSS that works:

table,
th,
td {
    border: 1px solid black;
}

textarea {
    width: 95%;
    height: 100px;
    background-color: #ffdddd;
}

input[type="button"],
input[type="submit"] {
    background-color: #ddddff;
}

Allan

imthenachoman

Ah. Got it. Thank you!