table header collapse when multiple tables inside panel-body bootstrap

Question

Im doing a page using bootstrap panel and horizontal-tabmenu. 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.

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 excellent, but if I add a second table to the same panel body, the headers get collapsed.So please help me, thanks in advance.

my ajax for the problamatic 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 extract 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 have fixed it by using classes like bs-component, col-lg-12, and row, Here is my html and the navigation tabs 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 putting the class row at first and then declaring the table size as large col-lg-12 and then the main important class bs-component, it is quite easy now to have any multiple tables for each navigation tabs.