Bootstrap水平可滚动表

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

或者你只需​​要table-responsive在表中添加类" "div

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

它会使表格可滚动.

Answer 2

把最大宽度溢出放在tableScrolldiv(容器)上代替......

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