Bootstrap 3 表 - 表响应不工作 [英] Bootstrap 3 table - table-responsive not working

问题描述

我正在将引导程序 3 用于网站项目.我正在尝试创建一个带有响应式表格的页面，以便当表格太大时我会有滚动条.我做了一个这样的测试用例:

<h4>Nuværende kurser</h4><div class="col-12 col-sm-12 col-lg-12"><div class="table-responsive"><table class="table"><头><tr><th>#</th><th>表格标题</th><th>表格标题</th><th>表格标题</th><th>表格标题</th><th>表格标题</th><th>表格标题</th></tr></thead><tr><td>1</td><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr><tr><td>2</td><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr><tr><td>3</td><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr></tbody>
</div><!-- end col-12 --></div><!-- 结束行-->

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

在此处查看屏幕截图:

我已经看到它在其他几个网站上运行，所以我正在做的事情......是错误的.

解决方案

用这个替换你的 table-responsive

-><div style="overflow-x:auto;">

I'm using bootstrap 3 for a website project. I'm trying to create a page with a responsive table, so that I'd have the scrollbar when the table is too big. I made a test case like so:

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

Now, the problem is that it doesn't add the scrollbar, it merely expands the website to the width of the table.

See a screenshot here:

I've seen it working on several other websites, so something I'm doing...is wrong.

解决方案

Replace your table-responsive with this

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

这篇关于Bootstrap 3 表 - 表响应不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！