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

问题描述

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

 < div class =row> 
< h4>Nuværendekurser< / h4> 
< div class =col-12 col-sm-12 col-lg-12> 
< div class =table-responsive> 
< table class =table> 
< thead> 
< tr> 
< th>＃< / th> 
< th>表格标题< / th> 
< th>表格标题< / th> 
< th>表格标题< / th> 
< th>表格标题< / th> 
< th>表格标题< / th> 
< th>表格标题< / th> 
< / tr> 
< / thead> 
< tbody> 
< 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> 
< / table> 
< / div> 
< / div><！ -  end col-12  - > 
< / div><！ - 结束行 - > 
  

现在，问题在于它不会添加滚动条，它只是将网站扩展到

请在这里查看屏幕截图：

我在其他几个网站上看到过它，所以我是做...是错误的。

解决方案

用您的表格替换您的表格

 < div class ='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;">

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