Table header fails when multiple tables inside the loading panel

Question

. I am making a page using the self-loading bar and horizontal-tabmenu . My first table is good at heading alignment, but the second and third table headers collapse on the body of the table. Here is my example that I tried, please help me.

bootstrap.html

<div class = "panel panel-default"> <div class = "panel-heading"> <ul class = "nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#home">Home</a></li> <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> <li><a data-toggle="tab" href="#menu3">Menu 3</a></li> </ul> </div> <div class="tab-content"> <div id="home" class="tab-pane fade in active"> <div class = "table-responsive"> <table border="0" cellpadding="0" cellspacing="0" width="100%" id="contract_wise" class="table table-bordered table-colstriped table-hover"> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> </table> </div> </div> <div id="menu1" class="tab-pane fade"> <div class = "table-responsive"> <table border="0" cellpadding="0" cellspacing="0" width="100%" id="sdm_wise" class="table table-bordered table-colstriped table-hover"> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> </table> </div> </div> <div id="menu2" class="tab-pane fade"> <h3>Menu 2</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div> <div id="menu3" class="tab-pane fade"> </div> </div> </div> 

So, the first table works fine, but if I add a second table to the same panel, the headers will collapse. So please help me, thanks in advance.

my ajax for trial table:

 jQuery("#sdm_wise").dataTable({ dom: "<'row'<'col-sm-12'Bftri>>" + "<'row'<'col-sm-4'l><'col-sm-8'p>>", "sAjaxSource": "report_datatable_db.php?mode=sdm_wise_datatable", "bDestroy": true, "scrollX": true, "bInfo": true, select: true, buttons: [{ extend: 'collection', text: 'Export', buttons:[ { extend: 'pdfHtml5', orientation: 'landscape', pageSize: 'LEGAL', text: '<i class="fa fa-file-pdf-o">&nbsp&nbsp&nbsp&nbsp&nbspPDF</i>', titleAttr: 'PDF' }, { extend: 'excelHtml5', orientation: 'landscape', pageSize: 'LEGAL', text: '<i class="fa fa-file-excel-o">&nbsp&nbsp&nbsp&nbsp&nbspEXCEL</i>', titleAttr: 'Excel' }, { extend: 'csvHtml5', orientation: 'landscape', pageSize: 'LEGAL', text: '<i class="fa fa-file-text-o">&nbsp&nbsp&nbsp&nbsp&nbspCSV</i>', titleAttr: 'CSV' }, { extend: 'copyHtml5', orientation: 'landscape', pageSize: 'LEGAL', text: '<i class="fa fa-files-o">&nbsp&nbsp&nbsp&nbsp&nbspCOPY</i>', titleAttr: 'Copy' } ] }, { extend: 'print', orientation: 'landscape', pageSize: 'LEGAL' } ] }); 

And the method I used to retrieve data from mysql is below,

 $rows = array(); if (mysqli_multi_query($mysqli, $query)) { do { if ($result = mysqli_store_result($mysqli)) { while ($row = $result->fetch_array()) { $rows[] = $row; } $result->free(); } } while (mysqli_next_result($mysqli)); } mysqli_free_result($result); $results = array("aaData"=>$rows); echo json_encode($results); exit; 

Answer 1

I fixed it using classes like bs-component, col-lg-12 and row . Here is my html and navigation tab alignment.

index.html

 <div class="row"> <div class="col-lg-12"> <div class="bs-component"> <ul class="nav nav-tabs responsive"> <li class="active"> <a data-toggle="tab" href="#tab1">Contract-Wise</a> </li> <li> <a data-toggle="tab" href="#tab2" onclick = "show_sdm()">SDM-Wise</a> </li> <li> <a data-toggle="tab" href="#tab3" onclick = "show_sub()">SUB-Wise</a> </li> <li> <a data-toggle="tab" href="#tab4" onclick = "show_chain()">ChainName-Wise</a> </li> </ul> <div class="tab-content"> <div id="tab1" class="tab-pane fade active in"> <table id = "contract_wise" class="table table-striped table-bordered table-hover footable toggle-medium"> <thead> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </thead> <tbody> </tbody> </table> </div> 

By first placing the class row, and then declaring the table size as large col-lg-12 , and then the main important class bs-component , it is now quite easy to have multiple tables for each navigation tab.