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

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

在此处查看截图:

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

Answer 1

用这个替换你的表

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

Answer 2

确保设置表格显示块

.table {
   display: block !important;
}

Answer 3

bootstrap的表响应在沙箱环境中工作得很好,但它在实时环境中有问题.该错误的原因是bootstrap提供宽度为表的响应式样式:100%和overflow-y:hidden.这两种风格并不能很好地融合在一起.当存在固定宽度或最大宽度时,溢出隐藏效果最佳.我给表响应最大宽度:270px; 对于移动设备,并修复了错误.

Answer 4

你的代码没问题。我刚刚在这里架设了一个小提琴。

\n\n

在那里工作！

\n\n

我确实复制并粘贴了您的代码。您确定 Bootstrap 的 Javascript 文件和 CSS 文件的链接有效吗？

\n\n

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

\n