DataTables + Bootstrap 3 enabling horizontal scrolling issue

Question

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

@dima sorry forgot to save the fiddle. I updated my post, please take a look at it. — newbie
– newbie, Commented Apr 7, 2014 at 0: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 -> jsfiddle.net/5KbLt. — davidkonrad
– davidkonrad, Commented Apr 7, 2014 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
– davidkonrad, Commented Apr 7, 2014 at 11:07

Community · Accepted Answer · 2020-06-20 09:12:55Z

-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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 6, 2014 at 23:59

Avi

3094 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

newbie Over a year ago

check the fiddle now.

Collectives™ on Stack Overflow

DataTables + Bootstrap 3 enabling horizontal scrolling issue

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related