首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Twitter bootstrap可滚动表格

Twitter bootstrap可滚动表格
EN

Stack Overflow用户
提问于 2012-05-03 03:13:58
回答 14查看 381K关注 0票数 161

我想在我的网站上有一张桌子。问题是这个表大约有400行。如何限制表格的高度,并对其应用滚动条?这是我的代码:

<div class="span3">
  <h2>Achievements left</h2>
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Something</td>
    </tr>
  </tbody>
</table>

  <p><a class="btn" href="#">View details &raquo;</a></p>
</div>

我尝试将最大高度和固定高度应用于表,但它不起作用。

EN

回答 14

Stack Overflow用户

回答已采纳

发布于 2012-05-03 03:15:41

表元素似乎不直接支持这一点。将表格放在div中,设置div的高度并设置overflow: auto

票数 263
EN

Stack Overflow用户

发布于 2012-05-03 03:19:35

.span3 {  
    height: 100px !important;
    overflow: scroll;
}​

您可能希望将它包装在它自己的div中,或者给span3一个它自己的id,这样就不会影响整个布局。

这里有一个小把戏:http://jsfiddle.net/zm6rf/

票数 57
EN

Stack Overflow用户

发布于 2013-08-31 00:50:45

我遇到了同样的问题,并使用了上述解决方案的组合(并添加了我自己的解决方案)。请注意,我必须指定列宽,以保持标题和正文之间的宽度一致。

在我的解决方案中,页眉和页脚保持不变,而正文滚动。

<div class="table-responsive">
    <table class="table table-striped table-hover table-condensed">
        <thead>
            <tr>
                <th width="25%">First Name</th>
                <th width="13%">Last Name</th>
                <th width="25%" class="text-center">Address</th>
                <th width="25%" class="text-center">City</th>
                <th width="4%" class="text-center">State</th>
                <th width="8%" class="text-center">Zip</th>
            </tr>
        </thead>
    </table>
    <div class="bodycontainer scrollable">
        <table class="table table-hover table-striped table-condensed table-scrollable">
            <tbody>
                <!-- add rows here, specifying same widths as in header, at least on one row -->
            </tbody>
        </table>
    </div>
    <table class="table table-hover table-striped table-condensed">
        <tfoot>
            <!-- add your footer here... -->
        </tfoot>
    </table>
</div>

然后应用了下面的CSS:

.bodycontainer { max-height: 450px; width: 100%; margin: 0; overflow-y: auto; }
.table-scrollable { margin: 0; padding: 0; }

我希望这对其他人有帮助。

票数 35
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/10420168

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档