Fixed first column overlaps the horizontal scrollbar

shuaybi

Any one every faced this problem?

See the image below:

I have a fixed first column and enabled scrollX. There is a slight overlap between the first column and horizontal scrollbar.

I am using semantic-ui for styling. And maybe the thickness of the scrollbar is not compatible with the data tables calculations.

My data tables configuration is:

{
fixedColumns: true,
autoWidth: true,
scrollX: true,
scrollY: "500px",
scrollCollapse: true,
paging: false,
ordering: false,
columns: [...]
data: [...]
}

shuaybi

I resolved the problem with the following css:

::-webkit-scrollbar {
height: 10px;
}

It looks like for the datatables calculations the width of the horizontal scrollbar should be no more than 10px.