Twitter bootstrap 引导表-右列从DIV父级中删除

我对引导表使用了以下代码。我使用的是引导V4

不会手动将任何功能添加到标记中

<div class="fd-user-item-cart">
    <table class="table table-striped table-bordered">
       <thead>
           <tr>
               <th scope="col">111111111</th>
               <th scope="col">222222222</th>
               <th scope="col">333333333</th>
               <th scope="col">444444444</th>
               <th scope="col">555555555</th>
               <th scope="col">666666666</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>1396/02/08</td>
               <td>2</td>
               <td>#456532</td>
               <td><img src="images/food-mini.jpg" alt=""></td>
               <td>asdasdasd</td>
               <td>1</td>
           </tr>
       </tbody>
   </table>
</div>

111111111
222222222
333333333
444444444
555555555
666666666
1396/02/08
2.
#456532
阿斯达斯达斯德
1.

但是，有一个问题与响应

---

在平板电脑的显示模式中，右列从DIV父项中删除。没有手动向标记添加任何功能。

将第一行更改为

<div class="fd-user-item-cart">
    <table class="table table-striped table-bordered">
       <thead>
           <tr>
               <th scope="col">111111111</th>
               <th scope="col">222222222</th>
               <th scope="col">333333333</th>
               <th scope="col">444444444</th>
               <th scope="col">555555555</th>
               <th scope="col">666666666</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>1396/02/08</td>
               <td>2</td>
               <td>#456532</td>
               <td><img src="images/food-mini.jpg" alt=""></td>
               <td>asdasdasd</td>
               <td>1</td>
           </tr>
       </tbody>
   </table>
</div>

<div class="table-responsive">

---

由bootstrap 4的官方文档提供。

. . .

---

最重要的是

.table

和

.table responsive

。使用它们，它会有响应。

使用此代码而不是您的代码

<div class="fd-user-item-cart table-responsive">
<table class="table table-striped table-bordered">
   <thead>
       <tr>
           <th scope="col">111111111</th>
           <th scope="col">222222222</th>
           <th scope="col">333333333</th>
           <th scope="col">444444444</th>
           <th scope="col">555555555</th>
           <th scope="col">666666666</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>1396/02/08</td>
           <td>2</td>
           <td>#456532</td>
           <td><img src="images/food-mini.jpg" alt=""></td>
           <td>asdasdasd</td>
           <td>1</td>
       </tr>
   </tbody>

111111111
222222222
333333333
444444444
555555555
666666666
1396/02/08
2.
#456532
阿斯达斯达斯德
1.

---

您的第一行有问题。 编辑它，希望它能为你工作

<div class="table-responsive">

问题出在哪里？列是否超出了最大宽度？谢谢。在平板电脑的显示模式下，右列将从DIV parent中删除。没有手动向标记添加任何功能。您使用的是bootstrap 3还是4？谢谢。我已经添加了答案。看看它是否有用。您还需要

表
类？表类不是应该在表上而不是
上吗？那是官方文件说的？请看。他使用的是bootstrap 4，当您使用响应表类时，您也不需要
.col-md-6
或任何
.col
。实际上不要用它们非常感谢Saeed