表的Bootstrap3响应不起作用

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 在表格上方的 div 中不起作用，但将其添加到 table 类中可以...执行以下操作，您的问题应该得到解决。

不工作：

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

作品：

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

演示版