css - 移动设备上的 Bootstrap 表

Question

.table-responsive 应该使表格可滚动。但是，对我来说，表格超出了容器边界。

jsfiddle http://jsfiddle.net/fbmor9e4/1/

这是我的 HTML:

<div id="manage-batteries-container" class="col-md-12 col-xs-12 container-fluid">
    <div class="col-md-12 col-xs-12" id="batteries-list">
        <table class="table table-responsive" style="margin-top:4em">
        </table>
    </div>
</div>

当我检查正在应用的 css 时，我可以看到两个 overflow 属性都被划掉了:

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

我不知道为什么会这样，所以我尝试了这个:

@media screen and (max-width: 767px) {
    .table-responsive {
        border: none;
        overflow: scroll;
        overflow: auto;
    }
}

但是，除了出现的奇怪的灰色边框外，我什么也没修复。现在 overflow: scroll 被划掉了:

media="all"
@media screen and (max-width: 767px)
.table-responsive {
  border: none;
  overflow: scroll;
  overflow: auto;
}

我没有发现任何可能导致冲突的 css 属性。我为表格定义的唯一内容是:

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    border-top: 1px solid #333;
}

.table > thead > tr > th {
    border-bottom: 2px solid #333;
}

如何让 table 适合容器？

jsfiddle http://jsfiddle.net/fbmor9e4/1/

Answer 1

.table-responsive 放在包裹表格的 div 上，而不是表格本身:

http://getbootstrap.com/css/#tables-responsive

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