claudios claudios - 24 days ago 10
CSS Question

Bootstrap table vertical scroll

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

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

Comments