当panel-body bootstrap中有多个表时,表头会崩溃

Question

我正在使用bootstrap面板和horizo​​ntal-tabmenu做一个页面.我的第一个表格在标题对齐方面很好,但第二个和第三个表格标题正在与表格主体折叠.这是我试过的样本,请有人帮助我.

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>

所以第一个表工作得很好,但如果我将第二个表添加到同一个面板主体,则标题会崩溃.所以请帮助我,提前谢谢.

我的问题表的ajax:

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

我用来从mysql中提取数据的方法如下,

$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

我已经通过使用bs-component、col-lg-12 和 row 等类修复了它，这是我的 html 和导航选项卡对齐方式。

索引.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>

通过首先放置类行，然后将表大小声明为 Large col-lg-12，然后声明主要的重要类bs-component，现在可以很容易地为每个导航选项卡创建多个表。