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中的resposive表代码

即:

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

Answer 2

您还可以检查bootstrap datatable插件以及上述问题.

它将具有大型列表可滚动功能以及许多其他选项

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

有关示例的更多信息,请查看此链接

Answer 3

@Ciwan.你是对的.桌子全宽(太宽).不是一个好的解决方案 最好这样做:

CSS:

.scrollme {
    overflow-y: auto;
}

HTML:

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