Horizontal Scrolling issue with lots of columns (table overflowing, scrolling not working correctly)

ecjonathan

Hi,

I seem to have hit a bug with Horizontal Scrolling on a table with ~22 columns.

The issue is demonstrated here: http://jsfiddle.net/bPaM7/9/

Notice how the table is overflowing the container and horizontal scrolling is not working. Upon clicking the table header to sort, the table is adjusted and fits within the container but the columns are not aligned correctly to the header and upon clicking the table header to sort again, the table reverts back to overflowing the container.

This has been tested with Firefox 16.0.1 on OSX, Chrome 22.0.1229.94 on OSX and Internet Explorer 9 on Windows 7, on each of these the problem is more or less the same.

If the no. of columns is reduced to ~7, the issue is not present, as demonstrated here: http://jsfiddle.net/bPaM7/10/

Am I doing anything wrong or can you confirm this is indeed a bug?

I appreciate any help you can give on this.

Kind Regards,

Jonathan

rewen

Hi Jonathan,

In your example I tried setting a min width of 100px on your cells, and that seemed to work:
[code]table tbody td {
min-width: 100px;
}[/code]

However, setting it to something like 50px doesn't work.

Hopefully there's a better fix but for now maybe you can get away with something like that.

rewen

Another workaround is to do [code]table.fnAdjustColumnSizing();[/code] after init. But the sizes of the tds do not seem to match up with the th's.

TheSisb

Removing the sScrollXInner fixed it:
http://jsfiddle.net/bPaM7/12/

ecjonathan

Thanks for your replies @rewen @TheSisb

Interestingly removing sScrollXInner doesn't fix my live copy, but I see it has fixed the test version on jsfiddle so I'll investigate further.

ecjonathan

After much more messing around I've managed to get my live copy to behave, using both your suggestions of removing sScrollXInner and setting a min-width of 100px on the table td and th elements.

Thanks for your help.

TheSisb

Confirmed: min-width:100px is a requirement for this to work, strangely.

GraemeMiller

I need to get this issue fixed for one of our sites. We need the inner scroll to work consistently for varying tables with different sizes on a range of browsers. The same issue is reported here http://datatables.net/forums/discussion/12491/datatables-header-alignment-issue-refresh.

Any idea of how much support time is required to get this issue resolved?