带有bootstrap的可滚动表

时间:2016-06-27 11:27:44

标签: html css angularjs twitter-bootstrap

我正在使用bootstrap学习angularjs,我在表中显示数据现在它有很多列,因此数据溢出,可以通过向右滚动页面看到,但这意味着完整的页面需要滚动我只需要表要滚动的组件而不是整个页面。我怎样才能做到这一点?

我已经将overflow-x作为滚动,但仍然滚动整个页面而不仅仅是表格

table ng-table="tableParams" show-filter="true" class="table table-striped" style="overflow-x: scroll">

3 个答案:

答案 0 :(得分:3)

在table属性中定义样式,如下所示:

style =“overflow-x:auto; width:200px;     身高:389像素;“

答案 1 :(得分:1)

设置表格的大小(例如,使用100vh作为整页高度),然后应用

溢出:滚动;

到你的桌子,元素应该独立滚动。

答案 2 :(得分:0)

您必须使用table-responsive类创建另一个div。

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

Responsive tables