Html 引导水平滚动表

我已经为此挣扎了一段时间了。我在bootstrap中有一个表，如果它变宽了，我希望它可以滚动，这样他们至少可以滚动查看信息

我的html非常简单，只是一个盒子里的表格

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

但似乎什么都不管用

我在这里设置了一个JSFIDLE

---

任何帮助都将不胜感激

将最大宽度溢出放在

表croll

div（容器）上

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

---

终于为Bootstrap 2.3.2找到了一个表水平滚动的解决方案，我想和大家分享一下。但我不能因此而获得荣誉；詹姆斯·钱伯斯是《引导式MVC》的作者

只需将其添加到自定义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; 
}

---

保持桌子的宽度不变

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

并向表div class.box内容添加更多内容

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

它会起作用的。

---

请让我知道它是否有效。

否则您只需将类“

表格响应

”添加到表格

div

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

---

它将使表格可滚动。

请将样式

溢出-x:scroll

到表的父元素，在本例中为

---

这是jsFiddle链接：

这是在容器上的……我有一些分页，这也会产生影响。我只是希望表格滚动，而不是容器。我给出了相同的答案，这里是一个更新的JSFIDLE：我更新了我的FIDLE以显示我不想滚动的内容。我认为溢出在表格上不起作用。溢出仅适用于块级元素。表元素不是块元素。那么这就是我的答案…display:block；不知道你是否解决了这个问题。。。我遇到了同样的问题，并在此处找到了解决方案。请查找链接：

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