scrollY with height bigger than actual table height, with scrollCollapse causes unwanted scrollbars

scrollY with height bigger than actual table height, with scrollCollapse causes unwanted scrollbars

vyruzvyruz Posts: 5Questions: 2Answers: 0

I've been hammering on this problem for the past few days but can't find any solution...
I have a website were dataTables is used on a search results page, so it must be able to handle a few records, or many.
I wanted to use vertical scrolling to make sure the headers stay visible no matter how many records are found, but this is giving me a headache...

First of all, I think this is a bug, I managed to solve it for me but you might want to fix this.
I am also using horizontal scrolling on the same table, and this results in the table always getting a horizontal scroll bar, even when making the window bigger, when I expect it shouldn't be doing this, take a look at this example:
http://jsfiddle.net/kzgq1L25/3/.
As you can see there is a horizontal scrollbar, which seems to be created because of the space the vertical scrollbar is taking up, but even when you resize the window, the horizontal scrollbar will keep appearing.
I managed to fix this by adding this css to my table:

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

Which results in this example which at least solves the horizontal scrollbar: http://jsfiddle.net/kzgq1L25/2/

Now my main problem, is as you can see, there is always a vertical scrollbar being added, even when the table height is less than the given height in the scrollYparameter. This is only happens when also using "scrollCollapse": true. In the last example the table consists just of 2 rows, and according to Chrome developer tools, the tbody element is just 62px big, and I've given the "scrollY": "500px" parameter to dataTables, so I would expect to NOT have a vertical scrollbar.

Any ideas on how to fix this?

Answers

This discussion has been closed.