Bootstrap table vertical scroll

Question

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 overflow-y, display to block, and given height 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 here.

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.

HTML:

.table-earnings {
  background: #F3F5F6;
}
table {
  display: block;
  height: 200px;
  overflow-y: auto;
}

<div class="container">
  <br>
  <div class="row">
    <div class="col-xs-8">
      <table class="table table-earnings table-earnings__challenge">
        <thead>
          <tr>
            <th>TITLE</th>
            <th>DATE TAKEN</th>
            <th>STATUS</th>
            <th>AMOUNT</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Day 1</td>
            <td>11/08/2016</td>
            <td>
              <img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt="">
            </td>
            <td>$1.00</td>
          </tr>
          <tr>
            <td>Day 1</td>
            <td>11/08/2016</td>
            <td>
              <img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt="">
            </td>
            <td>$1.00</td>
          </tr>
          <tr>
            <td>Day 1</td>
            <td>11/08/2016</td>
            <td>
              <img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt="">
            </td>
            <td>$1.00</td>
          </tr>
          <tr>
            <td>Day 1</td>
            <td>11/08/2016</td>
            <td>
              <img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt="">
            </td>
            <td>$1.00</td>
          </tr>
          <tr>
            <td>Day 1</td>
            <td>11/08/2016</td>
            <td>
              <img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt="">
            </td>
            <td>$1.00</td>
          </tr>
          <tr>
            <td>Day 1</td>
            <td>11/08/2016</td>
            <td>
              <img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt="">
            </td>
            <td>$1.00</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Answer 1

Wrapping your table in a div would solve your problem.

By default table takes display:table, in your code you are changing its natural behavior by changing its display to block. that absolutely will create mess.

.table-wrapper {
  max-height: 100px;
  overflow: auto;
  display:inline-block;
}

.table-wrapper {
  max-height: 100px;
  overflow: auto;
  display:inline-block;
}
.table-earnings {
  background: #F3F5F6;
}

<div class="container">
  <br>
  <div class="row">
    <div class="col-xs-8">
      <div class="table-wrapper">
        <table class="table table-earnings table-earnings__challenge">
          <thead>
            <tr>
              <th>TITLE</th>
              <th>DATE TAKEN</th>
              <th>STATUS</th>
              <th>AMOUNT</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Day 1</td>
              <td>11/08/2016</td>
              <td>
                <img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt="">
              </td>
              <td>$1.00</td>
            </tr>
            <tr>
              <td>Day 1</td>
              <td>11/08/2016</td>
              <td>
                <img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt="">
              </td>
              <td>$1.00</td>
            </tr>
            <tr>
              <td>Day 1</td>
              <td>11/08/2016</td>
              <td>
                <img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt="">
              </td>
              <td>$1.00</td>
            </tr>
            <tr>
              <td>Day 1</td>
              <td>11/08/2016</td>
              <td>
                <img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt="">
              </td>
              <td>$1.00</td>
            </tr>
            <tr>
              <td>Day 1</td>
              <td>11/08/2016</td>
              <td>
                <img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt="">
              </td>
              <td>$1.00</td>
            </tr>
            <tr>
              <td>Day 1</td>
              <td>11/08/2016</td>
              <td>
                <img src="https://www.srx.com.sg/srx/home/images/tracker/icon_social_sms.png" alt="">
              </td>
              <td>$1.00</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Updated fiddle