FixedHeader column widths don't match row columns when scrolling

deliaDua

Hello,

We use dataTables with the fixedHeader plugin to display big tables. In some tables the width of the header columns doesn't match the columns of the rows. It's funny that on some tables that doesn't happen. However we tried a lot and couldn't find the problem; solutions found through googling didn't solve it.

Do you have an idea what may be the issue?

There is a working example here: https://jsfiddle.net/deliaDua/qjkmszgL/

Best, FD

deliaDua

Hello again,
Last week we found out that it only doesn't work with certain browser:
The problem persists with Google Chrome 62.0 and Vivaldi 1.13.
It works correctly with Firefox Quantum (57.0) and Microsoft Edge (40.0).

It seems that the width are miscalculated because of the padding in the Bootstrap 4-classes .table, .table-sm etc.

Best, FD

deliaDua

We found a solution. Overwrite following css-attributes:

.table-bordered {
    border: 0;
    border-right: 1px solid #e9ecef;
}
.table-bordered tr th:first-child, .table-bordered tr td:first-child {
    border-left: 1px solid #e9ecef !important; /* this border still moves the fixedHeader by 1px, important because dataTables.css overwrites it otherwise */
}
.table-sm th,
.table-sm td {
    padding: 3px;
}

allan

Thank you. The fiddle you gave actually appears to work okay with Chrome for me. Are you saying that it shouldn't? Could you post a screenshot?

Thanks,
Allan