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

此代码块不会在 Bootstrap 中生成响应表。请帮助我使用引导程序实现响应式表。提前致谢

4

5 回答 5

38

以下响应表仅适用<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;
}
于 2014-05-08T06:09:27.790 回答
3

我知道文档是这样说的，我问过 .table-responsive 在表格上方的 div 中不起作用，但将其添加到表格类中是有效的……执行以下操作，您的问题应该得到解决。

不工作：

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

作品：

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

演示

于 2013-09-22T09:47:19.510 回答
1

Fizer Khan's answer on this page is correct. Just to add to it though, so that you only apply this when you absolutely want it in devices >768px, I'd recommend you create a custom CSS style in your own CSS file called something like:

.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;
}

Then you can just use it whenever you want to actually override Bootstrap's default behaviour.

于 2015-03-25T21:01:25.420 回答
1

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

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

[引导程序3]

于 2014-02-28T15:09:02.330 回答
0

您可能没有将宽度设置为外部（包装）div（或部分​​）。向外部元素添加 'width: 100%' 可能会解决问题。

于 2015-12-07T10:55:52.877 回答