Scrollable table with bootstrap

Question

I am learning angularjs with bootstrap, I am displaying data in table now it has many columns and hence data overflows and can be seen by scrolling the page to right, but this means that complete page needs to scrolled i need only the table component to be scrollable instead of the complete page. How can i achieve that ?

i have given overflow-x as scroll but still the complete page is scrolled instead of just table

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

You can have a div around the table with fix width and having overflow-x as scroll/auto. — Ajit Kumar Singh, Jun 27 '16 at 11:47
Possible duplicate of [Scrollable table with fixed header in bootstrap](http://stackoverflow.com/questions/21168521/scrollable-table-with-fixed-header-in-bootstrap) — BENARD Patrick, Jun 27 '16 at 12:24

score 3 · Accepted Answer · answered Jun 27 '16 at 11:37

3

Define style in table property like this:

style="overflow-x: auto; width:200px; height: 389px;"

answered Jun 27 '16 at 11:37

Deepanjan

649
2
8
15

score 1 · Answer 2 · answered Jun 27 '16 at 11:32

1

Set a size for the table (e.g. use 100vh for full page-height), then apply

overflow: scroll;

to your table, and the element should scroll independently.

answered Jun 27 '16 at 11:32

JollyOlJosh

11
2

score 0 · Answer 3 · answered Jun 27 '16 at 11:32

0

You have to create another div around your table with class of table-responsive.

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

Responsive tables

answered Jun 27 '16 at 11:32

max

8,632
3
21
55

Scrollable table with bootstrap

3 Answers3