Bootstrap 3 表 - 表响应不起作用

Question

我正在为网站项目使用 bootstrap 3。我正在尝试创建一个带有响应表的页面，这样当表太大时我就会有滚动条。我做了一个这样的测试用例：

 <div class="row">
  <h4>Nuværende kurser</h4>
  <div class="col-12 col-sm-12 col-lg-12">
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div><!-- end col-12 -->
</div><!-- end row -->

现在，问题是它没有添加滚动条，它只是将网站扩展到表格的宽度。

请在此处查看屏幕截图：

我已经看到它在其他几个网站上工作，所以我正在做的事情……是错误的。

原文由 Daniel Olsen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

用这个替换你的表格响应

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

原文由 Savan Kachhiya Patel 发布，翻译遵循 CC BY-SA 3.0 许可协议