Header not aligned with data when data scrollbar scrolled co

We add a DHTMLX grid to a page
and configure the grid to be wide and to have scrollbars.

As long the scrollbar is not entirely scrolled to the right, it is fine.

However, when the scrollbar is scrolled competely to the right, the column headers are disaligned with the data columns. The disalignment width equals the width of the vertical scrollbar.

In the picture the top and middle grid are OK, but the bottom grid is scrolled completely to the right.

Is there a way to allow scrolling, and not have this disalignment?

<div id="test_grid_with_scrollbar_and_headers" style="width: 100%;"></div>

<script> var testGrid = new dhtmlXGridObject('test_grid_with_scrollbar_and_headers'); testGrid.setImagePath('/codebase/imgs/'); testGrid.setColumnMinWidth(100, 0); testGrid.setHeader('Column A,Column B,Column C'); testGrid.setInitWidths('700,700,700'); // Wider than screen resolution testGrid.setColAlign('left,left,left'); testGrid.setColTypes('ed,ed,ed'); testGrid.enableAutoWidth(false); testGrid.enableAutoHeight(true); testGrid.objBox.style.overflowX = 'scroll'; testGrid.objBox.style.overflowY = 'scroll'; testGrid.init(); var testData = { rows: [ { id: 1, data: ["Data A1", "Data B1", "Data C1"] }, { id: 2, data: ["Data A2", "Data B2", "Data C2"] }, { id: 3, data: ["Data A3", "Data B3", "Data C3"] } ] }; testGrid.parse(testData, "json"); </script>

Please, try to add the following css on your page:
table-layout: fixed !important;

Thanks for setting me in the right direction!

The problem was indeed caused by (non-DHX) CSS, specifically bootstrap.min.css setting

table { border-collapse: collapse; }

I fixed the problem using

table { border-collapse: separate !important;}