Bootstrap 3 表 - 表响应不起作用

Posted 2023-03-05

【中文标题】Bootstrap 3 表 - 表响应不起作用

【英文标题】：Bootstrap 3 table - table-responsive not working

【发布时间】：2014-12-11 05:02:55

【问题描述】：

我正在将 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 -->

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

在此处查看屏幕截图：

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

【问题讨论】：

那么，你想让表格有一个水平滚动条吗？

您对 table-responsive 的使用是正确的，它应该可以工作。顺便说一句，完全没有必要使用 col-12（不是引导类）、co-sm-12、col-lg-12 和行。除非您在它们上使用背景颜色，否则全宽元素不需要网格类。

@DanielOlsen 你最终弄清楚了吗？我发现在使用 display:table 作为表响应容器时遇到了同样的问题。

你是否包含了bootstrap的less和sass文件

我有一个网站项目，所有文件都托管在我自己的服务器上，而不是 CDN 上。但是在 localhost 上它没有响应地显示表格，但它显示在服务器上。不知道有什么玄机。包括 CSS、JS 在内的所有导入都可以在服务器上的本地主机上正常工作。

【参考方案1】：

确保设置你的表格显示block

.table 
   display: block !important;

【参考方案2】：

在我的代码中，我确实添加了一个 CSS 类：

.modal-body
  max-width:95vw;

布局确实适用于sm

【参考方案3】：

对我来说，主体元素中的“最小宽度”值破坏了此类的响应能力。

【参考方案4】：

我做到了。

<div style="display: table">
    <div style="display: table-row">
        <div style="display: table-cell">


            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12">


                       //wrapper that will give opportunity to use: overflow-x: auto; 
                       <table style="table-layout: fixed; width: 100%;">
                           <tr>
                               <td>


                                  //SCROLL
                                  <div style="width: 100%; overflow-x: auto;">

                                      //table, that shoud have "table-responsive" bootstrap class effect
                                      <table class="table table-hover">

                                          //...table content...

                                      </table>

                                  </div>


                               <td>
                           </tr>

                       </table>                           


                    </div>
                </div>

        </div>
    </div>
</div>

您将在 xs-screen 收到（来自我的应用程序的示例）：

【参考方案5】：

我遇到了这个问题，发现它可以为表格设置以 px 为单位的宽度，或者将表格设置为显示：块。

【参考方案6】：

试试这个 删除<div class="table-responsive">...</div> 并在 <div class="col-12 col-sm-12 col-lg-12">

中移动类表响应

示例 <div class="col-12 col-sm-12 col-lg-12 table-responsive"> 这 100% 的工作，但如果不工作移动类表响应较早的 Div 层， 在这种情况下，<div class="col-12 col-sm-12 col-lg-12">必须删除。

【讨论】：

您不能将样式类与网格类混合使用。您为将来难以调试的潜在问题做好了准备

【参考方案7】：

您可以使用 FooTable。它是一个 jQuery 插件，可让您调整表中的数据大小并重新分配数据，以最适合您当前的断点。

【讨论】：

指向第三方插件和应用程序的链接通常不被 SO 社区所接受。 SO 更倾向于帮助调试您的示例代码。

【参考方案8】：

用这个替换你的表响应

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

【讨论】：

你知道为什么原来的 .table-responsive 不起作用吗？

【参考方案9】：

bootstrap 的表响应在沙盒环境中运行良好，但在实时环境中存在问题。该错误的原因是引导程序提供了宽度：100% 和溢出-y：隐藏的表格响应样式。这两种风格一起玩不好。当存在固定或最大宽度时，溢出隐藏效果最佳。我给 table-responsive 一个 max-width: 270px;用于移动设备，并修复了该错误。

【参考方案10】：

你的代码很好。我只是设置了一个小提琴here。

在那里工作！

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

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

【讨论】：

它对我来说也很好用。我也认为它可能是引导 js 文件链接。

@Carlton 还有其他问题，可能是页面其他地方缺少 div。 .table-responsive 只是css，和js无关

我猜还有其他东西在阻止它。因为我也可以设置一个小提琴，它工作正常，但在我的页面上，它根本不工作......

一个字段集标签对我造成了严重破坏

jsfiddle 链接已损坏。