Bootstrap table vertical scroll
<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>