nagłówek tabeli zwija się, gdy wiele tabel wewnątrz panelu ładuje się

Question

Robię stronę przy użyciu panelu startowego i poziomy-tabmenu. Mój pierwszy stół jest dobry w wyrównaniu nagłówka, ale drugi i trzeci nagłówek tabeli są zawalone z ciałem stołu. Oto moja próbka, próbuję, proszę, pomóż mi.

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> 

Więc pierwsza tabela działa rewelacyjnie, ale jeśli dodać drugą tabelę do tego samego ciała panel, nagłówki dostać collapsed.So proszę mi pomóc, dzięki z góry.

mój ajax dla problamatic tabeli:

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' 
       } 
       ] 
    }); 

i metoda użyłem, aby wyodrębnić dane z mysql jest poniżej

$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

mam naprawić go za pomocą klas jak BS-składowej , col-lg-12 i wiersz, Oto moje wyrównanie kart HTML i nawigacyjnych.

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> 

umieszczając klasy wiersz najpierw, a następnie deklarowania rozmiar tabeli większa Col-lg-12 a następnie głównym ważną klasę bs jednoskładnikowy , teraz jest całkiem łatwo mieć wiele tabel dla każdej karty nawigacyjnej.