引导表没有响应答案

【问题标题】：bootstrap table is not responsive引导表没有响应
【发布时间】：2021-10-14 15:32:39
【问题描述】：

我有一个从数据库中填充数据的表。虽然当我不断减小浏览器的宽度时我使用了引导程序，但从某一点开始，表格就在容器之外。我怎样才能使这个响应？以下是附件图片

 <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>

【问题讨论】：

图片不错，但我们需要查看您的代码。见minimal reproducible example
你的桌子可能有一个固定的或最小的宽度
不，没有称为最小宽度的样式

标签： css twitter-bootstrap-3 laravel-5

【解决方案1】：

如果您使用引导程序。用table-responsive 类将您的表包裹在div 中。

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

如果正确集成了引导程序，这应该可以工作。请出示您的代码。更多的人会帮助你。

您可以在此处找到此特定信息： https://getbootstrap.com/docs/5.0/content/tables/#responsive-tables

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

确保 <div class="table-responsive"> 的一件事父元素该元素的宽度不得超过 100%。这意味着父元素需要有一定的宽度

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td colspan="2">Larry the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

【解决方案4】：

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

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

【讨论】：