Question

我有一个表填充数据库中的数据。虽然当我继续减小浏览器的宽度时我使用了引导程序，但是从一点开始，桌子就会越过容器。我怎样才能使这个响应？以下是附件图片

 <table  class="table table-responsive table-bordered">


            <tr>
                <th>Spare Id</th>
                <th>Part Number</th>
                <th>Quantity</th>
                <th>Price</th>
                <th>Warranty</th>
                {{--<th>Description</th>--}}
                <th>Spare Image</th>

                <th>


                    <input   type="text" class="form-control" id="search" placeholder="Search Spare">
                </th>


            </tr>
            <tbody id="tableModel">
            <?php
            foreach($spares as $spare){

            ?>
            <tr>
                <td ><?php echo $spare->id;?></td>
                <td ><?php echo $spare->partNumber;?></td>
                <td ><?php echo $spare->quantity;?></td>
                <td ><?php echo 'Rs.'. $spare->price;?></td>
                <td ><?php echo $spare->warranty;?></td>


                <td><?php echo '<img  class="img-responsive"  src="data:image/jpeg;base64,'.base64_encode( $spare->image ).'"/>';?></td>
                <td>

                    <a class=" btn btn-success btn-sm" data-toggle="modal" data-target="#modalEdit" onclick="EditBrand('<?php echo $brand->brandName;?>','<?php echo $brand->id;?>')" >Edit </a>

                    <a onclick="DeleteBrand(<?php echo $brand->id;?>)" style="" class=" btn btn-danger btn-sm"  >Delete </a>

                </td>

            </tr>

            <?php }?>
            </tbody>


        </table>

Answer 1

如果您使用bootstrap。使用div类table-responsive将表格换行。

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

如果正确集成了bootstrap，那应该可行。请出示您的代码。还有更多人会帮助你。

Answer 2

添加此行，将解决您的问题。

<div class='table-responsive'> <div style="overflow-x:auto;">

Answer 3

在此问题上，我已经做了很多工作，并为该引导表响应问题找到了一个好的解决方案。只需使用以下CSS：

.table{
   display: block !important;
   overflow-x: auto !important;
   width: 100% !important;
 }

引导表没有响应

3 个答案: