Bootstrap .table-responsive不在面板中工作

Question

 <div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                    <div class="panel-heading">Recent Transactions</div>
                    <table class="table table-responsive">
                        <thead>
                        <th>...</th>
                        <!-- th*5 -->
                        <th>...</th>
                        </thead>

                        <tbody>
                        @foreach($audits as $audit)
                            <tr>
                                <td>...</td>
                                <!-- td*5 -->
                                <td>...</td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
            </div>
        </div>
    </div>
</div>

在桌面上运行良好但在移动屏幕上失败。面板内只显示2列，其余列只是溢出......

如何让BS显示仅包含溢出内容的滚动条

Answer 1

.table-responsive类不会在桌面上进行，它应该放在父容器上。在这种情况下，面板正文<div>。

Fiddle

＆＃13;

＆＃13;

<div class="panel-heading">
  Recent Transactions
</div>
<div class="panel-body table-responsive">
  <table class="table">
    <thead>
      <th>...</th>
      <!-- th*5 -->
      <th>...</th>
    </thead>

    <tbody>
      @foreach($audits as $audit)
      <tr>
        <td>...</td>
        <!-- td*5 -->
        <td>...</td>
      </tr>
      @endforeach
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;