58

我怎样才能使容器内具有自己宽度的表格不跟随容器的宽度，而是在表格不在容器内时保留表格的宽度。我有一张非常宽的桌子，我想把它放在 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>
4

3 回答 3

130

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

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

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

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

IE：

<div class="table-responsive">
<table class="table">
...
</table>
</div>
于 2013-11-10T00:12:07.677 回答
24

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

CSS：

.scrollme {
    overflow-x: auto;
}

html:

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

编辑：将 scroll-y 更改为 scroll-x

于 2017-09-18T19:04:57.563 回答
18

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

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

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

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

于 2015-06-30T08:55:26.027 回答