Question

<div class="table-responsive">
<table class="table">
...
</table>
</div>

此代码块未导致Bootstrap中的响应表。请帮助我使用bootstrap实现响应表。提前致谢

Answer 1

以下自适应表格仅适用于<768px。

<div class="table-responsive">
    <table class="table">
    </table>
</div>

因为bootstrap 3有以下代码

@media (max-width: 767px) {
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        overflow-x: scroll;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #DDD;
        -webkit-overflow-scrolling: touch;
    }
}

如果您想要显示>768px的响应式表格，那么您可以在没有媒体查询的情况下在css中覆盖它，就像这样

.table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #DDD;
    -webkit-overflow-scrolling: touch;
}

Answer 2

我知道文档说的是我已经问过.table-responsive doesn't work in div above the table but adding it to the table class works ...请执行以下操作并解决您的问题。

无效：

<div class="table-responsive">
  <table class="table">
  ......
  </table>
</div>

<强>使用：

<table class="table table-responsive">
......
</table>

DEMO

Answer 3

我不明白为什么以下内容不起作用...确保您没有设置宽度或高度...发布完整的HTML。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

[bootstrap3]

Answer 4

Fizer Khan在本页的回答是正确的。只是为了添加它，所以你只在你希望它在设备＆gt; 768px中应用它时，我建议你在你自己的CSS文件中创建一个自定义的CSS样式，如：

.table-responsive-force {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #DDD;
    -webkit-overflow-scrolling: touch;
}

然后，只要您想要实际覆盖Bootstrap的默认行为，就可以使用它。

Answer 5

您可能没有将宽度设置为外（包装）div（或部分）。添加宽度：100％＆＃39;外部元素可能会解决问题。

响应表的Bootstrap 3不起作用

5 个答案: