title: table header collapse when multiple tables inside panel-body bootstrap
body: <p><a href="https://i.stack.imgur.com/w3pYr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w3pYr.png" alt="thats the second table in panel body "></a><a href="https://i.stack.imgur.com/B8oIP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B8oIP.png" alt="thats the first table in panel body"></a>Im doing a page using <strong>bootstrap panel and horizontal-tabmenu</strong>. My first table is good in header alignment but the second and the third table headers are getting collapsed with the table body.Here is my sample I tried, please someone help me.</p>
  
  <p>bootstrap.html</p>
  
  <pre><code>&lt;div class = "panel panel-default"&gt;
  
          &lt;div class = "panel-heading"&gt;
          &lt;ul class = "nav nav-tabs"&gt;
              &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a data-toggle="tab" href="#menu1"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a data-toggle="tab" href="#menu2"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a data-toggle="tab" href="#menu3"&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/div&gt;
  
      &lt;div class="tab-content"&gt;
          &lt;div id="home" class="tab-pane fade in active"&gt;
          &lt;div class = "table-responsive"&gt;
              &lt;table border="0" cellpadding="0" cellspacing="0" width="100%" id="contract_wise" class="table table-bordered table-colstriped table-hover"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="menu1" class="tab-pane fade"&gt;
          &lt;div class = "table-responsive"&gt;
              &lt;table border="0" cellpadding="0" cellspacing="0" width="100%" id="sdm_wise" class="table table-bordered table-colstriped table-hover"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="menu2" class="tab-pane fade"&gt;
              &lt;h3&gt;Menu 2&lt;/h3&gt;
              &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="menu3" class="tab-pane fade"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So the first table works excellent, but if I add a second table to the same panel body, the headers get collapsed.So please help me, thanks in advance.</p>
  
  <p>my ajax for the problamatic table:</p>
  
  <pre><code>jQuery("#sdm_wise").dataTable({
              dom: "&lt;'row'&lt;'col-sm-12'Bftri&gt;&gt;" + "&lt;'row'&lt;'col-sm-4'l&gt;&lt;'col-sm-8'p&gt;&gt;",
              "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: '&lt;i class="fa fa-file-pdf-o"&gt;&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbspPDF&lt;/i&gt;',
                                  titleAttr: 'PDF'
                              },
                              {
                                  extend: 'excelHtml5',
                                  orientation: 'landscape',
                                  pageSize: 'LEGAL',
                                  text: '&lt;i class="fa fa-file-excel-o"&gt;&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbspEXCEL&lt;/i&gt;',
                                  titleAttr: 'Excel'
                              },
                              {
                                  extend: 'csvHtml5',
                                  orientation: 'landscape',
                                  pageSize: 'LEGAL',
                                  text:      '&lt;i class="fa fa-file-text-o"&gt;&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbspCSV&lt;/i&gt;',
                                  titleAttr: 'CSV'
                              },
                              {
                                  extend: 'copyHtml5',
                                  orientation: 'landscape',
                                  pageSize: 'LEGAL',
                                  text: '&lt;i class="fa fa-files-o"&gt;&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbspCOPY&lt;/i&gt;',
                                  titleAttr: 'Copy'
                              }
                  ]
                  },
                  {
                      extend: 'print',
                      orientation: 'landscape',
                      pageSize: 'LEGAL'
                  }
                  ]
      });
  </code></pre>
  
  <p>And the method I used to extract data from mysql is below,</p>
  
  <pre><code>$rows = array();
          if (mysqli_multi_query($mysqli, $query)) {
              do {
                  if ($result = mysqli_store_result($mysqli)) {
                      while ($row = $result-&gt;fetch_array()) {
                          $rows[] = $row;
                      }
                      $result-&gt;free();
                  }
              } while (mysqli_next_result($mysqli));
          }
          mysqli_free_result($result);
  
          $results = array("aaData"=&gt;$rows);
          echo json_encode($results);
          exit;
  </code></pre>