Question

我一直在努力解决这个问题。我在bootstrap中有一个表，如果它变宽，我想让它可滚动，所以他们至少可以滚动查看信息。

我的html非常简单，只是一个框内的表格

<div class='box'>
  <div class='box-header'>
    <h4>Title</h4>
  </div>
  <div class='box-content'>
    <table>
    <!--Table Stuff-->
    </table>
  </div>
</div>

我尝试过常规设置width然后设置overflow-x:scroll;这样

table{
 width:100px;
 max-width:100px;
 overflow-x:scroll;
}

但似乎没有任何效果。

我在这里设置了一个jsFiddle。 http://jsfiddle.net/AHyuF/3/

任何帮助都会非常受欢迎！

Answer 1

将最大宽度溢出放在tableScroll div（容器）上，而不是......

.tableScroll{
    width:200px;
    max-width:200px;
    overflow-x:scroll;
}

Answer 2

或者您只需要将“table-responsive”类添加到表div

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

它会使表格可滚动。

Answer 3

最后找到了Bootstrap 2.3.2的表水平滚动解决方案，我想分享一下。但是不能因此而受到赞扬;这就是Bootstrapping MVC的作者James Chambers。

只需将其添加到自定义CSS文件中即可。

.table-responsive 
{   
    width: 100%;
    margin-bottom: 15px;
    overflow-x: auto;   
    overflow-y: hidden;     
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #000000; 
}

Answer 4

请将样式overflow-x: scroll;放入表的父元素，在本例中为<div class='box-content'>。

以下是jsFiddle链接：http://jsfiddle.net/AHyuF/38/

Answer 5

将表格宽度保持为

table{
 width:200px;
 max-width:200px;
 overflow-x:scroll;
}

并向表div类.box-content

添加更多内容

.box-content {overflow-x:auto;}

它会起作用。如果有效，请告诉我。

Bootstrap水平可滚动表

5 个答案: