Twitter Bootstrap可滚动表

我想在我的网站上放一张桌子。问题在于该表将有约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>

我试图将最大高度和固定高度应用于表格，但是它不起作用。

表元素似乎不直接支持此功能。将表格放在div中并设置div的高度并设置overflow: auto。

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

您需要将其包装在它自己的div中，或给span3一个它自己的ID，这样就不会影响整个布局。

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

不需要将它包装在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

我遇到了同样的问题，并使用了上述解决方案的组合（并添加了我自己的一个转折）。请注意，我必须指定列宽以使它们在标题和正文之间保持一致。

在我的解决方案中，当正文滚动时，页眉和页脚保持固定。

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

我希望这可以帮助其他人。

最近，我不得不使用bootstrap和angularjs进行此操作，我创建了一个angularjs指令来解决该问题，您可以在此博客文章中看到一个有效的示例和详细信息。

您只需在表标签中添加固定标题属性即可使用它：

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

如果您不使用angularjs，则可以调整指令的javascript并直接使用它。

的CSS

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

的HTML

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

对于大量的行，这可能不是解决方案。我简单地使用重表的手段来得到的小行计数表行的事，同时也能保持弹性列宽，你可以试试这个小提琴。

（固定宽度列是我用于大型行计数表的方法，该表仅需要标题行重复）

样例代码：

<div style="height:30px;overflow:hidden;margin-right:15px;">
   <table class="table">
       <thead>
           <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cel 1,1</td>
                <td>Cel 1,2</td>
                <td>Cel 1,3</td>
            </tr>
            <tr>
                <td>Cel 2,1</td>
                <td>Cel 2,2</td>
                <td>Cel 2,3</td>
            </tr>
            <tr>
                <td>Cel 3,1</td>
                <td>Cel 3,2</td>
                <td>Cel 3,3</td>
            </tr>


        </tbody>
    </table>
</div>
<div style="height:100px;overflow-y:scroll;;">
    <table class="table">
        <thead>

        </thead>
        <tbody>
            <tr>
                <td>Cel 1,1</td>
                <td>Cel 1,2</td>
                <td>Cel 1,3</td>
            </tr>
            <tr>
                <td>Cel 2,1</td>
                <td>Cel 2,2</td>
                <td>Cel 2,3</td>
            </tr>
            <tr>
                <td>Cel 3,1</td>
                <td>Cel 3,2</td>
                <td>Cel 3,3</td>
            </tr>
             <tr style="color:white">
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
            </tr>
        </tbody>
    </table>
</div>

将表格放在div中，然后为该div分配类pre-scrollable。

我最近遇到了类似的问题，最终使用多种不同的解决方案对其进行了修复。

第一个也是最简单的一个方法是使用两个表，一个用于标题，一个用于主体。此方法有效，但标题和正文列未对齐。而且，由于我想使用Twitter引导程序表随附的自动调整大小，因此我最终创建了一个Javascript函数，该函数可以在以下情况下更改标题：窗户被调整大小；列中的数据更改，依此类推。

这是我使用的一些代码：

        <table class="table table-striped table-hover" style="margin-bottom: 0px;">
        <thead>
            <tr>
                <th data-sort="id">Header 1</i></th>
                <th data-sort="guide">Header 2</th>
                <th data-sort="origin">Header 3</th>
                <th data-sort="supplier">Header 4</th>
            </tr>
        </thead>
    </table>
    <div class="bodycontainer scrollable">
        <table class="table table-hover table-striped table-scrollable">
            <tbody id="rows"></tbody>
        </table>
    </div>

标头和正文分为两个单独的表。其中之一是在具有必要样式的DIV内以生成垂直滚动条。这是我使用的CSS：

.bodycontainer {
  //height: 200px
  width: 100%;
  margin: 0;
}

.table-scrollable {
  margin: 0px;
  padding: 0px;
}

我在这里评论了高度，因为无论页面高度如何，我都希望表格能到达页面底部。

我在标头中使用的数据排序属性也在每个td中使用。这样，我可以获得每个td的宽度和填充以及行的宽度。通过使用CSS设置的数据排序属性，相应地设置了每个标题的标题和宽度，以及标题行的填充和宽度，标题行始终较大，因为它没有滚动条。这是使用coffeescript的函数：

fixHeaders: =>
  for header, i in @headers
    tdpadding = parseInt(@$("td[data-sort=#{header}]").css('padding'))
    tdwidth = parseInt(@$("td[data-sort=#{header}]").css('width'))
    @$("th[data-sort=#{header}]").css('padding', tdpadding)
    @$("th[data-sort=#{header}]").css('width', tdwidth)
    if (i+1) == @headers.length
      trwidth = @$("td[data-sort=#{header}]").parent().css('width')
      @$("th[data-sort=#{header}]").parent().parent().parent().css('width', trwidth)
      @$('.bodycontainer').css('height', window.innerHeight - ($('html').outerHeight() -@$('.bodycontainer').outerHeight() ) ) unless @collection.length == 0

在这里，我假设您有一个名为@headers的标头数组。

它不是很漂亮，但是可以工作。希望它能帮助某人。

以上所有解决方案都使表头也滚动...如果只想滚动tbody，则应用以下方法：

tbody {
    height: 100px !important;
    overflow: scroll;
    display:block;
}

这些答案对我来说都不令人满意。他们要么没有将表标题行固定在适当的位置，要么需要固定的列宽才能正常工作，即使这样，在各种浏览器中，标题行和正文行的排列也往往不一致。

我建议咬一下子弹，并使用适当的网格控件，例如jsGrid或我个人喜欢的SlickGrid。显然，它引入了一个依赖关系，但是如果您希望表的行为像带有跨浏览器支持的真实网格一样，则可以节省您的工作。如果需要，还可以选择排序和调整列的大小以及其他功能。

关于乔纳森·伍德的建议。我没有选择用新的div包装表格的选项，因为我使用的是CMS。这是我使用JQuery所做的：

$( "table" ).wrap( "<div class='table-overflow'></div>" );

这将使用“ table-overflow”类的新div包装表元素。

然后，您可以简单地在css文件中添加以下定义：

.table-overflow { overflow: auto; }     

将表格放在div内以使可垂直滚动的表格成为可能。进行更改overflow-y以overflow-x使表格可水平滚动。只是overflow为了使表格可水平和垂直滚动。

<div style="overflow-y: scroll;"> 
    <table>
    ...
    </table>
</div>

猜想我会在这里发布，因为我无法在Bootstrap 4中使用上述任何工具。

table
{
    width: 100%;
    display: block;
    border:solid black 1px;
}

thead
{
    display: inline-block;
    width: 100%;
    height: 20px;
}

tbody
{
    height: 200px;
    display: inline-block;
    width: 100%;
    overflow: auto;
}

th, td
{
    width: 100px;
    border:solid 1px black;
    text-align:center;
}

我还附上了工作的jsfindle。

https://jsfiddle.net/jgngg28t/

希望它可以帮助其他人。