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

您还可以检查bootstrap数据表插件以及上述问题。

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

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

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

Answer 3

@Ciwan。你是对的。桌子全宽（太宽）。不是一个好的解决方案最好这样做：

的CSS：

.scrollme {
    overflow-y: auto;
}

HTML：

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

Bootstrap / CSS中的水平滚动表

3 个答案: