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>

Abhishek Pandey · Accepted Answer · 2016-11-09 06:21:46Z

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

Man thanks it worked! Somethings missing in here. I just added width: 100%; to occupy the whole col.
With a .table-responsive table, I removed the display: inline-block; to have the full width.

Collectives™ on Stack Overflow

Bootstrap table vertical scroll

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related