DataTables + Bootstrap 3 enabling horizontal scrolling creates a bug

DataTables + Bootstrap 3 enabling horizontal scrolling creates a bug

forsakendollforsakendoll Posts: 11Questions: 0Answers: 0
edited April 2014 in Bug reports

I'm having a problem with DataTables integrated with Bootstrap 3 and horizontal scrolling is enabled

Here is my fiddle ( )

I don't know why the header is not aligned with the body of the table. I tried the solution on previous post with same issue. But It still doesn't work for me.


  • tangerinetangerine Posts: 3,340Questions: 35Answers: 394
    Your jsfiddle link is missing a reference.
  • forsakendollforsakendoll Posts: 11Questions: 0Answers: 0
    Sorry forgot to save the fiddle

    Here it is again ( )
  • allanallan Posts: 59,779Questions: 1Answers: 9,677 Site admin
    With DataTables 1.10 and the latest integration files all appears good:


  • protectaprotecta Posts: 3Questions: 1Answers: 0
    edited August 2014


    Hello guys,
    I've the same problem, my table is included in a bootstrap 3 modal, the headers are fixed, the vertical and horizontals scrolls work, but headers and data columns are not aligned at all : when I scroll from left to right, the last colum may have the cell value of 3 columns to the left...

    My js :

                        "scrollY": 400,
                        "scrollX": true,
                        "info": false,
                        "ordering": false,
                        "searching": false

    Link :
    You see at the top right the last column, while you can still use the horizontal scroll at the bottom.. The bottom scroll should be only left-scrollable, but as nothing is aligned, the last 3 columns data can be in the last column by right-scrolling..

    I use the latest version of datatables and bootstrap.

    Sorry for my bad English.

    [edit] : When using ColVis, unchecking a column, and checking it again, everything gets aligned. O.O. I checked the page with firefug. When i did not use ColVis yet, all headers have a width of 0 px; When i uncheck and check a column in ColVis, each header has a width > 0px. Is there a way to simulate the calculation of each element ?

This discussion has been closed.