Horizontal Scrolling messes up the table header alignments
Horizontal Scrolling messes up the table header alignments
bruparel
Posts: 1Questions: 0Answers: 0
I am running into a strange problem when I upgraded my Rails application to use Bootstrap 2 instead of Web App Theme with the horizontally scrolled datatables. The horizontal scrolling worked perfectly on my datatables with a large number of columns when using Web App Theme. However, when I upgraded to Bootstrap 2, the table headers are out of alignment with the table body.
It seems like the horizontal scrolling is not enabled at all for the header elements whereas the table body columns can be scrolled left and right correctly. For instance, when I set white-space to nowrap for both td and th as shown below:
td, th {
white-space: nowrap;
}
I see the table header stretched outside the boundaries of the datatable since it is not wrapping the white spaces in the header anymore, The header elements should scroll within the boundaries of the datatable but not wrap.
Has anyone run into this problem with Bootstrap 2 and datatables?
It seems like the horizontal scrolling is not enabled at all for the header elements whereas the table body columns can be scrolled left and right correctly. For instance, when I set white-space to nowrap for both td and th as shown below:
td, th {
white-space: nowrap;
}
I see the table header stretched outside the boundaries of the datatable since it is not wrapping the white spaces in the header anymore, The header elements should scroll within the boundaries of the datatable but not wrap.
Has anyone run into this problem with Bootstrap 2 and datatables?
This discussion has been closed.
Replies
Normally the width of data table is 650px, even I tried the one which you are doing. I couldn't fix that. At last I came with an idea making "overflow: scroll;" . This is solution which I found.
I guess, this is fixed in DataTables 1.10.