html - Bootstrap 表格垂直滚动

Question

我正在为我的应用程序制作一些 Bootstrap 表，但我被堆叠在垂直滚动上。我可以在 overflow-y 的帮助下做到这一点, display to block , 和 given height并且它按预期滚动，但问题是当我的表格标题之一有几个文本字符时，它不会填满整个表格的宽度。我想我在这里错过了一些东西。请看 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

将表格包装在 div 中可以解决您的问题。

默认 table需要display:table ，在您的代码中，您通过更改其 display to block 来更改其自然行为.那绝对会造成困惑。

.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