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>

剩下的成就
#
名称
1.
某物
2.
某物
3.
某物
4.
某物
5.
某物
6.
某物

---

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

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

溢出：auto

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

您将希望将其包装在它自己的div中，或者为span3提供它自己的id，这样就不会影响整个布局

这里有一把小提琴：

CSS

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

HTML

剩下的成就
...

我最近遇到了一个类似的问题，最终用不同的解决方案解决了它

第一个也是最简单的一个是使用两个表，一个用于标题，一个用于正文。这可以工作，但标题和正文列没有对齐。而且，由于我想使用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>

我在这里对高度进行了注释，因为我希望表格能够到达页面底部，无论页面高度如何

我在标题中使用的数据排序属性也在每个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的头数组

---

它不漂亮，但很管用。希望它能帮助别人。

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

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

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

---

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

以上所有解决方案都会使表头滚动。。。 如果只想滚动t车身，请应用以下步骤：

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

---

不需要把它包在一个盒子里

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

tr{
宽度：100%；
显示：内联表；
表布局：固定；
}
桌子{
height:300px；//我最近不得不使用bootstrap和angularjs来实现这一点，我创建了一个angularjs指令来解决这个问题，您可以看到一个工作示例和详细信息

您只需将固定标题属性添加到表标记即可使用它：

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


...

如果您不使用angularjs，您可以调整指令的javascript并直接使用它。
这可能不是解决大行数问题的方法。我只是简单地使用复制表技巧来完成小行数表的操作，同时它可以保持flex列宽，您可以尝试一下

（固定宽度列是我用于大行计数表的方法，它只需要标题行复制）

示例代码：


第1列
第2列
第3列
Cel 1,1
Cel 1,2
Cel 1,3
Cel 2,1
Cel 2,2
Cel 2,3
Cel 3,1
Cel 3,2
Cel 3,3
Cel 1,1
Cel 1,2
Cel 1,3
Cel 2,1
Cel 2,2
Cel 2,3
Cel 3,1
Cel 3,2
Cel 3,3
第1列
第2列
第3列
这些答案对我来说都没有令人满意的效果。它们要么没有固定表标题行，要么需要固定列宽才能工作，甚至在不同的浏览器中，标题行和正文行也往往不对齐

我建议咬紧牙关，使用适当的网格控件，如或我个人最喜欢的控件。它显然引入了依赖项，但如果您希望您的表在跨浏览器支持下表现得像真正的网格，这将节省您的时间。它还为您提供了排序和调整列大小的选项，以及大量其他我需要的功能如果您想要它们。
是Jonathan Wood的建议。由于我使用的是CMS，所以我没有用新div包装表的选项。使用JQuery我做了以下工作：

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

将表格放在一个div中，并为该div设置类
可预滚动的
我想我会在这里发布，因为我无法使用Bootstrap 4实现上述任何一项。我在网上找到了这个类，它对我来说非常适合

表格
{
宽度：100%；
显示：块；
边框：纯黑1px；
}
泰德
{
显示：内联块；
宽度：100%；
高度：20px；
}
表格主体
{
高度：200px；
显示：内联块；
宽度：100%；
溢出：自动；
}
th，td
{
宽度：100px；
边框：实心1px黑色；
文本对齐：居中；
}

我还附上了工作jsfindle


希望它能帮助其他人。
将表格放在div中，使表格垂直滚动。将
overflow-y
更改为
overflow-x
使表格水平滚动。只需
overflow
即可
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;
}

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

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

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

.table-overflow { overflow: auto; }     

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