How to fix line alignment with the header

polianomartini

Hi guys!

I created a table using Bootstrap 4 and realized that the vertical scroll bar is out of alignment with the header when a value is set to scrollY.

I applied it by CSS to make the header 100%:

.dataTables_scrollHeadInner {
    width: 100% !important;
}

.dataTables_scrollHeadInner table {
    width: 100% !important;
}

However, the lines were misaligned to the header after applying the formatting.

Could someone help me solve it?

Live demo.

allan

I actually disagree that it is out of alignment in your first screenshot I’m afraid. The right most border of the “Credit Amount” column is in alignment with the right most border of the table cells for that column. Or perhaps another way of putting it is that the column header widths all exactly match the body cell column widths.

In your second image, that isn’t possible since the header and body tables are not of equal width. The only way to make that work would be with table-layout: fixed and assigning the column widths explicitly (and having that final column header being a different width from its body column cells).

Allan