title: Bootstrap Horizontal Scrolling Table
body: <p>I have a very long table that I created and had to put horizontal scrolling on it so be able to see all the fields.</p>
  
  <p>I did this by adding: </p>
  
  <pre><code>div.horizontal {
     width: 100%;
     height: 500px;
     overflow: auto;
  }
  
  table-layout: fixed;
  
  .table {
     display: table;
     table-layout: fixed;
     width: 100%;
  }
  </code></pre>
  
  <p>My table is then wrapped inside a container and a div like so:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
     &lt;div class="horizontal"&gt;
        &lt;table class="table table-bordered" name="int"&gt;
  ...........
  </code></pre>
  
  <p>Everything is working as intended however because I am defining a height in the horizontal div, the scroll bar is in the middle of the page. However, when I use a percentage, its always 100% of the content, not of the over all page.</p>
  
  <p>My goal here is to just get the scroll bar on the bottom of the browser like normal but be able to keep this full width table I have.</p>
  
  <p>Here is a screenshot: <img src="https://i.stack.imgur.com/lhzIj.jpg" alt="enter image description here"></p>
  
  <p>As you can see, with the Defined 500px the scroll bar lands there (which is expected with a fixed width). I just assumed that using a percentage <code>100%</code> would have pushed it down to the bottom but It didnt.</p>
  
  <p>Any ideas how I can get this scroll bar to the bottom of the page?</p>
  
  <p>Thanks</p>