数据库表和表内容未正确换行

Question

我的网站上有一个可用的数据表，但最初的问题是列太多，侧滚动会带走数据表的搜索功能、页码和条目数选项。我将包装代码添加到我的数据表 JS 代码中，如下所示：

<script type="text/javascript">
    (function($) {
        $(document).ready(function() {
            $('#mytable').DataTable();
            $("#mytable").wrap("<div style='overflow-x: auto' />");
        });
    }(jQuery));
</script>

这使得数据表选项固定并且只横向滚动表格内容（这是我想要的）但它看起来像这样：

因此，该功能现在可以正常工作，但我想找到一种方法使表格全宽，并让数据表选项像以前一样位于顶部和下方，而不是将表格夹在中间数据表选项。

这是完整的表格代码：

<div class="dashboardTable" style="width:920px;">

    <table id="mytable" style="border: 1px solid #468BBD; border-collapse: collapse; width:100%; margin:0 auto;">
        <thead>
            <tr style="border: 1px solid #468BBD;">
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Preformed</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Work Order Number</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Date</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Utility</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Name</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Address</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Serial No.</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">lowSideMIUNumArriv</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">lowSideMIUNumDepart</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">highSideMIUNumArriv</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">highSideMIUNumDepart</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">locationNotes</th>
                <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">locationComments</th>
            </tr>
        </thead>
        <tbody>
            <?php
                while($row = mysqli_fetch_array($result1)){
            ?>
            <tr>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderType2'];?>&nbsp;</td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderNum'];?>&nbsp;</td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['date'];?>&nbsp;</td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['utility'];?>&nbsp;</td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['serviceName'];?>&nbsp;</td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['address'];?>&nbsp;</td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><?php echo '<a href="/dashboard-display?id='.$row['serialNumber'].'">'.$row['serialNumber'].'</a>'; ?>   </td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['lowSideMIUNumArriv'];?>&nbsp;</td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['lowSideMIUNumDepart'];?>&nbsp;</td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['highSideMIUNumArriv'];?>&nbsp;</td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['highSideMIUNumDepart'];?>&nbsp;</td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['locationNotes'];?>&nbsp;</td>
                <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['locationComments'];?>&nbsp;</td>
            </tr>
            <?
                }
            ?>
        </tbody>
    </table>

</div>

<script type="text/javascript"    src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
</script>

<script type="text/javascript">
    (function($) {
        $(document).ready(function() {
            $('#mytable').DataTable();
            $("#mytable").wrap("<div style='overflow-x: auto' />");
        });
    }(jQuery)); 
</script>

Answer 1

把你的桌子放在<div class="table-responsive"> </div>部分