Twitter 引导程序可滚动表 [英] Twitter bootstrap scrollable table

问题描述

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

<h2>剩下的成就</h2><table class="table table-striped"><头><tr><th>#</th><th>姓名</th></tr></thead><tr><td>1</td><td>某事</td></tr><tr><td>2</td><td>某事</td></tr><tr><td>3</td><td>某事</td></tr><tr><td>4</td><td>某事</td></tr><tr><td>5</td><td>某事</td></tr><tr><td>6</td><td>某事</td></tr></tbody><p><a class="btn" href="#">查看详情&raquo;</a></p>

我尝试将 max-height 和 fixed height 应用到 table，但它不起作用.

解决方案

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

I would like to have a table on my website. The problem is that this table will have about 400 lines. How can I limit the table's height, and apply scrollbar to it? This is my code:

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

I tried to apply max-height and fixed height to table, but it doesn't work.

解决方案

Table elements don't appear to support this directly. Place the table in a div and set the height of the div and set overflow: auto.

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