html - Bootstrap/CSS 中的水平滚动表

Question

我怎样才能让容器内的表格具有自己的宽度不跟随容器的宽度，而是在表格不在容器内时保留表格的宽度。我有一张非常宽的 table ，我想将其放入 col-md-9 容器中，但它显示效果不佳，因为它会挤压 table 以适应容器。我已经为表格尝试了 min-width 但它不灵活，因为向我的表格添加更多列会再次挤压它。是否可以在不遵循父级宽度的情况下使表格的宽度自动设置？

<div class="col-md-9" style="overflow-x: auto">
    <table class="table table-bordered" style="width:auto">
    <tbody>
        <tr>
          .... contents
        </tr>
    <tbody>
    </table>
</div>

Answer 1

如果您使用的是 Bootstrap 3，这里有一种可能性

实时取景:http://fiddle.jshell.net/panchroma/vPH8N/10/show/

编辑 View :http://jsfiddle.net/panchroma/vPH8N/

我正在使用来自 http://getbootstrap.com/css/#tables-responsive 的响应表代码

即:

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