Datatables Improperly Sized In Bootstrap Tab

I have a page that has three bootstrap tabs and a datatable in each tab. The datatable in the first tab works fine. However, the datatable in the second tab is at half-width and I

Solution 1:

I found a very simple solution : adding "style:100%"

<table style="width: 100% !important" id="my-table" datatable="ng" dt-options="dtOptions" class="table table-striped table-bordered table-hover dataTables-example">

Solution 2:

Keep the dataTable instances, i.e.

var companies2 = $('#companies2').DataTable({
  responsive: true
})

Then use columns.adjust() to recalculate the widths when the tab holding the table becomes visible :

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  if (e.target.hash == '#tab2') {
    companies2.columns.adjust().draw()
  }
})

Completely untested with your specific scenario, but this is certainly the way to go.

Solution 3:

SOLUTION

Use columns.adjust() and responsive.recalc() recalculate the column widths when table becomes visible.

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
    $($.fn.dataTable.tables(true)).DataTable()
        .columns.adjust()
        .responsive.recalc();
}); 

DEMO

https://jsfiddle.net/gyrocode/Ltga3n4u/

LINKS

See jQuery DataTables – Column width issues with Bootstrap tabs for solution to the most common problems with jQuery DataTables and Bootstrap Tabs.

Solution 4:

When using Responsive add-on for DataTables, you should also call responsive.recalc(), also:

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    $.fn.dataTable.tables({ visible: true, api: true })
        .columns.adjust()
        .responsive.recalc()
        .draw();
});

It'a na old question, but maybe someone will help this additional information.

Solution 5:

Simple fix! Use autoWidth: false

$('#companies').DataTable({ 
    responsive: true,
    autoWidth: false

});


$('#companies2').DataTable({ 
    responsive: true,
    autoWidth: false

});