Question

我有数据表。当我在 860px 以下调整大小时，它会在桌子外面。我有一个 8 表格标题，但当我调整窗口大小时，第8个标题会在表格之外。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel panel-default"> <div class="row"><div class="col-sm-12 col-md-12"><table ui-jq="dataTable"  class="table table-striped b-t b-b dataTable no-footer" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info">
                    <thead>
                        <tr role="row" class="font-bold text-center no_border">
                            <th style="width: 150px;" class="sorting_asc no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Rendering engine: activate to sort column descendig" aria-sort="ascending">Name</th>
                            <th style="width: 150px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Emai Id</th>
                            <th style="width: 100px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending">Seq No</th>
                            <th style="width: 200px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Ticket Type</th>
                            <th style="width: 150px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Amount</th>
                            <th style="width: 50px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Paid</th>
                            <th style="width: 150px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Order Date</th>
                            <th style="width: 150px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Payment Order</th>
                            <!--<th style="width: 120px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Payment</th>-->
                        </tr>
                    </thead>
                    <tbody>
                    <tr role="row" class="odd">
                        <td class="sorting_1">
                            <img src="images/image.png" class="img-circle vertical_align_middle" width="35" height="35"><span class="margin_left_30">Saumil</span>
                        </td>
                        <td>saumil12346678@gmail.com</td>
                        <td>VGA 1001</td>
                        <td>Lark - Super Early Bird</td>
                        <td>INR 1000</td>
                        <td>YES</td>
                        <td>30th November 2016</td>
                        <td><button type="button" class="btn btn-success">Refund</button> </td>
                    </tr>

                    </table></div></div>
                    </div>

这是JSFiddle

任何帮助都会很棒。谢谢。

Answer 1

您将桌子的宽度固定为1200px，将所有的宽度固定为150px，因此无论屏幕大小如何，桌子大小都不会改变

由于你使用的是bootstrap，你应该将你的表放在一个div中，然后给div一个 table-responsive

 <div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

See documentation here

HTML Datatable：表行正在外面

1 个答案: