title: how to fit large wider and heigher table for all screen at bootstrap 3
body: <p>I've faced a problem with bootstrap table. Basically, my table will be dynamic and at first some columns will be hidden. Some/All hidden column will be showed dynamically based on user's action. When, many/all columns are shown, a scroll-bar will come at the bottom of my browser window. But, I want that scroll-bar come to my table instead of page/browser window. I mean, this is happened now which I don't want:</p>
  
  <p><img src="https://i.imgur.com/Of4tQTa.png" title="Hosted by imgur.com" /> </p>
  
  <p>I want bootstrap <code>.table-responsive</code> feature for my larger screen too when my table's width cross the visible width of the browser:</p>
  
  <p><img src="https://i.imgur.com/dclejrw.png" title="Hosted by imgur.com"/></p>
  
  <p>Also I want vertical scroll-bar when it'll cross a definite height. To make this, I've applied a css like this:</p>
  
  <pre><code>.table-custom {
      max-height: 150px;
      overflow: auto;
  }
  </code></pre>
  
  <p>which is not working. And for horizontal scroll-bar(when table's width cross the parent's width), I can't apply any fixed width as I've to concern about all large and small screen. So, what can I do to appear scroll-bars(both vertical and horizontal) when the dynamic table cross the width and height of it's parent div?</p>
  
  <p><a href="http://jsfiddle.net/learner73/vwrva9L6/9/embedded/result/" rel="nofollow noreferrer">My fiddle</a></p>