Bootstrap 滚动表

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

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

您可能希望将它包装在自己的 div 中，或者为 span 3赋予自己的 id，这样就不会影响整个布局。

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

CSS

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

超文本标示语言

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

我最近也遇到过类似的问题，最后用不同的解决方案混合在一起解决了。

第一个也是最简单的方法是使用两个表，一个用于表头，一个用于表体。这样可以工作，但是标题栏和主体栏没有对齐。而且，由于我想使用 Bootstrap 表的自动调整大小功能，我最终创建了一个 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 中，该 DIV 具有生成垂直滚动条所需的样式。下面是我使用的 CSS:

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


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

我在这里注释了高度，因为我希望表能够到达页面的底部，不管页面高度是多少。

我在头中使用的数据排序属性也在每个 td 中使用。这样我就可以得到每个 td 的宽度和填充以及行的宽度。使用我使用 CSS 设置的 data-sort 属性，相应地为每个标题和标题行设置填充和宽度，标题行总是更大，因为它没有滚动条。下面是使用 Coffee escript 的函数:

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>

然后应用下面的 CSS:

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

我希望这能帮到别人。

所有上述解决方案使表头滚动太..。 如果你只想滚动一个主体，那么应用这个:

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

Bootply.com/AgI8LpDugl”rel = “ noReferrer”> http://www.Bootply.com/agi8lpdugl