Twitter引导可滚动表
我想在我的网站上有一张桌子。 问题是这张桌子将有大约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 »</a></p> </div> 我试图应用最大高度和固定高度表，但它不起作用。
表格元素似乎不直接支持这一点。 将表放在一个div中，并设置div的高度，并设置overflow: auto 。
.span3 { height: 100px !important; overflow: scroll; }
你会想把它包装在自己的div中，或者给span3一个它自己的id，所以你不会影响你的整个布局。
这是一个小提琴： http : //jsfiddle.net/zm6rf/
不需要把它包装在一个分区…
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
我有同样的问题，并使用上述解决scheme的组合（并添加了我自己的扭曲）。 请注意，我不得不指定列的宽度，以保持标题和正文之间的一致性。
在我的解决scheme中，页眉和页脚在主体滚动时保持固定。
<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来做这个，我创build了一个解决这个问题的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>
以上所有的解决scheme都使表头滚动…如果你想滚动tbody只适用于：
tbody { height: 100px !important; overflow: scroll; display:block; }
这可能不是大行数的解决scheme。 我只是使用复制表格技巧来获取小行数表，而它可以保持flex列宽度，你可以试试这个小提琴 。
（固定宽度列是我用于大行计数表的方法，只需要标题行重复）
示例代码：
<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>
我最近有一个类似的问题，最终使用不同解决scheme的混合解决它。
第一个也是最简单的一个是使用两个表格，一个用于标题，另一个用于主体。 这工作，但标题和正文列不alignment。 而且，因为我想使用twitter引导表的自动大小，我最终创build了一个Javascript函数，在以下情况下更改标题：正文呈现; 窗户被resize; 列中的数据发生变化等
以下是我使用的一些代码：
<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; }
我在这里评论了高度，因为我希望表格能够到达页面的底部，而不pipe页面高度是多less。
我在标题中使用的数据sorting属性也在每个td中使用。 这样我可以得到每个td的宽度和填充以及行的宽度。 使用数据sorting属性，我使用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的头部数组。
它不漂亮，但它的工作。 希望它可以帮助别人。
这些答案都没有令人满意地为我工作。 他们要么没有固定表格标题行或他们需要固定列宽工作，即使这样往往有标题行和主体行在各种浏览器中不alignment。
我build议咬住子弹，并使用适当的网格控制，如jsGrid或我个人最喜欢的SlickGrid 。 它显然引入了一个依赖关系，但是如果你希望你的表像一个跨浏览器支持的真正的网格一样行事的话，那么这样可以节省你的时间。 如果您需要，还可以select对列进行分类和大小调整以及其他大量function。
乔纳森·伍德的build议。 我没有select用新的div包装表格，因为我正在使用CMS。 使用JQuery这里是我做的：
$( "table" ).wrap( "<div class='table-overflow'></div>" );
这包装表格元素与一个新的div类“表溢出”。
你可以简单地在你的css文件中添加下面的定义：
.table-overflow { overflow: auto; }
这可以通过将表格体放入以下样式的div中完成：
@import url('bootstrap/3.3.7/css/bootstrap.min.css'); div.table-container { height: 300px; overflow-x: hidden; overflow-y: auto; margin-top: -20px; }
我们可以通过以下方式实现滚动到表
<table class="table"> <thead> <tr> <th>Name</th> <th>Salary</th> </tr> </thead> </table> <div class="table-container"> <table class="table"> <tbody> <tr> <th>John</th> <th>$12,00</th> </tr> <tr> <th>John</th> <th>$12,00</th> </tr> <tr> <th>John</th> <th>$12,00</th> </tr> <tr> <th>John</th> <th>$12,00</th> </tr> <tr> <th>John</th> <th>$12,00</th> </tr> <tr> <th>John</th> <th>$12,00</th> </tr> <tr> <th>John</th> <th>$12,00</th> </tr> <tr> <th>John</th> <th>$12,00</th> </tr> <tr> <th>John</th> <th>$12,00</th> </tr> <tr> <th>John</th> <th>$12,00</th> </tr> <tr> <th>John</th> <th>$12,00</th> </tr> </tbody> </table> </div>
工作演示： https ： //jsfiddle.net/87L81aem/
