Bootstrap 3 scrollable div for table

Question

I am using Bootstrap 3 with a navbar at the top and a page that displays a table formatted using Bootstrap 3 s table class   I would like the table  which is sitting in its own div  to be the only part of the page that is scrollable  when the width height of the data in the table exceeds that of the page    I have styled the div for the table as follows    mygrid-wrapper-div       overflow  scroll      height  200px      I have a fiddle illustrating this  and I added an ugly 5px red border around the div to highlight the area that I would like to have scrollable   http   jsfiddle net 4NB2N 4   Notice that scrolling left-to-right works great - I didn t have to do anything to get this to work  and the div adjusts the scrollbar automatically when the window is resized too   However  I don t know how to setup the div s height to behave the same way - I hardcoded the 200px value but really I would like the div to fill the  rest  of the window so that when the browser is resized it still works   How can I make the div behave the same both horizontally and vertically

User · Answer

A scrolling comes from a box with class pre-scrollable   lt div class  pre-scrollable  gt  lt  div gt    There s more examples  http   getbootstrap com css  code-block  Wish it helps

User · Answer

Well one way to do it is set the height of your body to the height that you want your page to be   In this example I did 600px   Then set your wrapper height to a percentage of the body here I did 70  This will adjust your table so that it does not fill up the whole screen but in stead just takes up a percentage of the specified page height       body      padding-top  70px     border 1px solid black     height 600px      mygrid-wrapper-div      border  solid red 5px     overflow  scroll     height  70       http   jsfiddle net 4NB2N 7   Update How about a jQuery approach     function          var window height     window  height       content height   window height - 200         mygrid-wrapper-div   height content height           window   resize function        var window height     window  height       content height   window height - 200         mygrid-wrapper-div   height content height         http   jsfiddle net 4NB2N 11

User · Answer

You can use too  style  overflow-y  scroll  height 150px  width  auto     It s works for me

[javascript] Bootstrap 3 scrollable div for table

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to twitter-bootstrap