Bootstrap/CSS中的水平滚动表

Question

我如何才能使容器内具有自己宽度的表格不跟随容器的宽度，而是在表格不在容器内时保持表格的宽度。我有一个非常宽的桌子，我想把它放在col md-9容器中，但它显示不好，因为它挤压了桌子以适合容器。我已经为表尝试了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/

编辑视图：http://jsfiddle.net/panchroma/vPH8N/

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

即：

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

Answer 2

@Ciwan。你是对的。桌子变成了全宽(太宽了)。这不是一个好的解决方案。更好的做法是：

css：

.scrollme {
    overflow-x: auto;
}

html：

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

编辑滚动:将-y更改为scroll-x

Answer 3

你也可以检查bootstrap datatable插件来解决上面的问题。

它将有一个大的列表滚动功能与许多其他选项

$(document).ready(function() {
    $('#example').dataTable( {
        "scrollX": true
    } );
} );

有关示例的更多信息，请查看此link