0

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

Here is my fiddle

DataTables Initalization

/* Data Table Initialization */
    var equipmentDataTable = $('#equipmentTable').dataTable({
                                    "aoColumnDefs": [{ "sClass": "text-center", "aTargets": [ 0,25 ] },
                                                     { 'bSortable': false, 'aTargets': [ 25 ] }],
                                    "sScrollX": '100%'
                             });

I don't know why the header is not aligned with the body of the table. Thanks in advance

newbie
  • 1,884
  • 7
  • 34
  • 55
  • you didn't provide the fiddle – dima Apr 07 '14 at 00:02
  • @dima sorry forgot to save the fiddle. I updated my post, please take a look at it. – newbie Apr 07 '14 at 00:09
  • jquery dataTables support one row of `th` in `thead` only. If you check the CSS it is obviously `.table` that makes problems - it has padding on `> thead > tbody > tr > th` but not on the `td`'s, and for some reason fixed widths is injected to the `th`'s. I would suggest you create your own `.table` class from scrath with this starting point -> http://jsfiddle.net/5KbLt/. – davidkonrad Apr 07 '14 at 11:06
  • It is a risky mix :) A responsive table layout mixed with dataTables mixed with markup dataTables not is very happy with. – davidkonrad Apr 07 '14 at 11:07
  • @davidkonrad I see. I try your suggestion – newbie Apr 07 '14 at 15:04

1 Answers1

-1

I had a similar issue, but solved it in a different way.

I modified the sDom parameter to wrap the table in an extra div:

<i>
sDom: 'r<"H"lf><"datatable-scroll"t><"F"ip>',
I then applied the following styles to the .datatable-scroll class:

/**
 * Makes the table have horizontal scroll bar if its too wide for its container
 */
.datatable-scroll {
    overflow-x: auto;
    overflow-y: visible;
}
</i>

source

Community
  • 1
  • 1
Avi
  • 193
  • 3
  • 15