引导表垂直滚动 [英] Bootstrap table vertical scroll

问题描述

我正在为我的应用程序制作一些引导表，但是我堆叠在垂直滚动条上.我可以借助 overflow-y ， display to block 和 given height 来做到这一点，它可以按预期滚动，但是抓到的时候是我的表格标题之一只有很少的文本字符，因此无法填满整个表格的宽度.我想我在这里想念什么.请参见此处.

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>

推荐答案

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

Wrapping your table in a div would solve your problem.

默认情况下， table 采用 display:table ，在您的代码中，您通过将其显示更改为block 来更改其自然行为.那绝对会造成混乱.

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

这篇关于引导表垂直滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！