title: Bootstrap table vertical scroll
body: <p>I'm making a few bootstrap table for my app but I was stacked on the vertical scroll. I can do it with the help of <code>overflow-y</code>, <code>display to block</code>, and <code>given height</code> and it scrolls as expected but the catch is when one of my table headers has few text character then it would not fill the entire table's width. I think I miss something in here. Please see <a href="https://jsfiddle.net/4pw5u73o/" rel="noreferrer">here</a>. </p>
  
  <blockquote>
    <p>Do I need to create another class to solve the issue of only one
    table? or is there a better way to get this done.</p>
  </blockquote>
  
  <p>HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.table-earnings {
    background: #F3F5F6;
  }
  table {
    display: block;
    height: 200px;
    overflow-y: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;br&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-8"&gt;
        &lt;table class="table table-earnings table-earnings__challenge"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;TITLE&lt;/th&gt;
              &lt;th&gt;DATE TAKEN&lt;/th&gt;
              &lt;th&gt;STATUS&lt;/th&gt;
              &lt;th&gt;AMOUNT&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;Day 1&lt;/td&gt;
              &lt;td&gt;11/08/2016&lt;/td&gt;
              &lt;td&gt;
                &lt;img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt=""&gt;
              &lt;/td&gt;
              &lt;td&gt;$1.00&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;Day 1&lt;/td&gt;
              &lt;td&gt;11/08/2016&lt;/td&gt;
              &lt;td&gt;
                &lt;img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt=""&gt;
              &lt;/td&gt;
              &lt;td&gt;$1.00&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;Day 1&lt;/td&gt;
              &lt;td&gt;11/08/2016&lt;/td&gt;
              &lt;td&gt;
                &lt;img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt=""&gt;
              &lt;/td&gt;
              &lt;td&gt;$1.00&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;Day 1&lt;/td&gt;
              &lt;td&gt;11/08/2016&lt;/td&gt;
              &lt;td&gt;
                &lt;img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt=""&gt;
              &lt;/td&gt;
              &lt;td&gt;$1.00&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;Day 1&lt;/td&gt;
              &lt;td&gt;11/08/2016&lt;/td&gt;
              &lt;td&gt;
                &lt;img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt=""&gt;
              &lt;/td&gt;
              &lt;td&gt;$1.00&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;Day 1&lt;/td&gt;
              &lt;td&gt;11/08/2016&lt;/td&gt;
              &lt;td&gt;
                &lt;img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt=""&gt;
              &lt;/td&gt;
              &lt;td&gt;$1.00&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>