Question

我正在使用引导程序面板和horizontal-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 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'
                }
                ]
    });

我用来从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和导航标签对齐。

的index.html：

SERVER_PORT

首先放置类行，然后将表格大小声明为 col-lg-12 ，然后将主要重要类 bs-component < / strong>，现在很容易为每个导航标签设置多个表。

当panel-body引导程序中的多个表时，表头崩溃

1 个答案: