Twitter引导可滚动表

Question

我想在我的网站上有一张桌子.问题是这个表有大约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>

我试图将max-height和固定高度应用于表,但它不起作用.

Answer 1

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

Answer 2

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

你需要将它包装在它自己的div中,或者让span3为它自己的id,这样你就不会影响整个布局.

这是一个小提琴:http://jsfiddle.net/zm6rf/

Answer 3

不需要将它包裹在div中...

CSS:

tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}

table{
 height:300px;              // <-- Select the height of the table
 display: -moz-groupbox;    // Firefox Bad Effect
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

Bootply:http://www.bootply.com/AgI8LpDugl

Answer 4

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

在我的解决方案中,页眉和页脚在身体滚动时保持固定.

<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; }

我希望这有助于其他人.

Answer 5

我最近有引导和angularjs要做到这一点,我创建了一个angularjs指令,它解决了这个问题,你可以看到这个工作的例子和细节的博客文章.

只需在表标记中添加fixed-header属性即可使用它:

<table class="table table-bordered" fixed-header>
...
</table>

如果你没有使用angularjs,你可以调整指令的javascript并直接使用它.

Answer 6

CSS

.achievements-wrapper { height: 300px; overflow: auto; }

HTML

<div class="span3 achievements-wrapper">
    <h2>Achievements left</h2>
    <table class="table table-striped">
    ...
    </table>
</div>

Answer 7

将表放在 div 中，并为该 div 指定 class pre-scrollable。