table is not being displayed properly

durgaharish

I have two tables in two different nav tabs. When I initialize the datatables on both of these tables. The table in the first nav tab is being displayed properly. But the second table is not. It is being squeezed. And the tbody row colspan is always 1 which is supposed to be equal to the number of columns in the table. These two tables are displayed properly when I don't use datatables on them.
below link is the code for tables and datatables initialization code:
https://jsfiddle.net/of0tgeh6/
Below are the screenshots links of the problem:
https://drive.google.com/file/d/0B9RbEZnGFP1JOGVZMVpMN21HdTg/view?usp=sharing
https://drive.google.com/file/d/0B9RbEZnGFP1JeV81LUMtalNfTlk/view?usp=sharing
Please help me.

TooManyTables

That's a problem I've run into on occasion - what you'll need to do is something like

$($.fn.dataTable.tables(true)).DataTable().columns.adjust();

That'll force the table to resize correctly. I usually put it inside the 'shown.bs.tab' Bootstrap event, like so, so it triggers when needed.

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

durgaharish

the problem still exists even after pasting the code you provided. Now my code is:

$(document).ready(function() {
         $('#forwarded_requests,#received_requests,#class_requests').DataTable( {
             dom: 'Bfrtip',
              buttons: [
                  'copyHtml5',
                  'excelHtml5',
                  'csvHtml5',
                  'pdfHtml5'
              ],
              search: false,
              "aoColumnDefs": [
   { 'bSortable': false, 'aTargets': ['no-sort'] }
                  ]
          } );
          $('a[data-toggle="tab"]').on('shown.bs.tab', function (evt) {
        $($.fn.dataTable.tables(true)).DataTable()
           .columns.adjust();
        
    });
          
      } );