jQuery Twitter Bootstrap 可滚动表格行和固定标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11483378/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap scrollable table rows and fixed header
提问by Jeff Locke
Does anyone know how to make a table with a fixed header row and scrollable body rows? I'm using twitter bootstrap if that matters.
有谁知道如何制作带有固定标题行和可滚动正文行的表格？如果这很重要，我正在使用 twitter bootstrap。
This is an example of what I'm trying to create:
这是我正在尝试创建的示例：
http://www.siteexperts.com/tips/html/ts04/page1.asp
http://www.siteexperts.com/tips/html/ts04/page1.asp
All the examples I've seen break it into two separate tables. Was wondering if anyone has a more elegant solution.
我见过的所有例子都将它分成两个单独的表格。想知道是否有人有更优雅的解决方案。
Twitter bootstrap also automatically adjusts the column sizes based on content so that's another reason I'd like to keep it in one table
Twitter 引导程序还会根据内容自动调整列大小，因此这是我想将其保留在一个表中的另一个原因
回答by raffian
Just stack two bootstrap tables; one for columns, the other for content. No plugins, just pure bootstrap (and that ain't no bs, haha!)
只需堆叠两个引导表；一个用于列，另一个用于内容。没有插件，只是纯粹的引导程序（这不是没有 bs，哈哈！）
<table id="tableHeader" class="table" style="table-layout:fixed">
<thead>
<tr>
<th>Col1</th>
...
</tr>
</thead>
</table>
<div style="overflow-y:auto;">
<table id="tableData" class="table table-condensed" style="table-layout:fixed">
<tbody>
<tr>
<td>data</td>
...
</tr>
</tbody>
</table>
</div>
The content table div needs overflow-y:auto, for vertical scroll bars. Had to use table-layout:fixed, otherwise, columns did not line up. Also, had to put the whole thing inside a bootstrap panel to eliminate space between the tables.
内容表 div 需要overflow-y:auto, 用于垂直滚动条。必须使用table-layout:fixed，否则，列没有对齐。此外，不得不将整个东西放在引导面板中以消除桌子之间的空间。
Have not tested with custom column widths, but provided you keep the widths consistent between the tables, it should work.
尚未使用自定义列宽进行测试，但如果您保持表格之间的宽度一致，它应该可以工作。
// ADD THIS JS FUNCTION TO MATCH UP COL WIDTHS
$(function () {
//copy width of header cells to match width of cells with data
//so they line up properly
var tdHeader = document.getElementById("tableHeader").rows[0].cells;
var tdData = document.getElementById("tableData").rows[0].cells;
for (var i = 0; i < tdData.length; i++)
tdHeader[i].style.width = tdData[i].offsetWidth + 'px';
});
回答by Panickos Neophytou
Here is a jQuery plugin that does exactly that: http://fixedheadertable.com/
这是一个 jQuery 插件，它正是这样做的：http: //fixedheadertable.com/
Usage:
用法：
$('selector').fixedHeaderTable({ fixedColumn: 1 });
$('selector').fixedHeaderTable({ fixedColumn: 1 });
Set the fixedColumnoption if you want any number of columns to be also fixed for horizontal scrolling.
fixedColumn如果您希望为水平滚动也固定任意数量的列，请设置该选项。
EDIT: This example http://www.datatables.net/examples/basic_init/scroll_y.htmlis much better in my opinion, although with DataTables you'll need to get a better understanding of how it works in general.
编辑：这个例子http://www.datatables.net/examples/basic_init/scroll_y.html在我看来要好得多，尽管使用 DataTables 你需要更好地理解它的工作原理。
EDIT2: For Bootstrap to work with DataTables you need to follow the instructions here: http://datatables.net/blog/Twitter_Bootstrap_2(I have tested this and it works)- For Bootstrap 3 there's a discussion here: http://datatables.net/forums/discussion/comment/53462- (I haven't tested this)
EDIT2：要使 Bootstrap 与 DataTables 一起使用，您需要按照此处的说明进行操作：http: //datatables.net/blog/Twitter_Bootstrap_2（我已经测试过它并且它有效）-对于 Bootstrap 3，这里有一个讨论：http://datatables .net/forums/discussion/comment/53462- （我还没有测试过）
回答by Stuart
Interesting question, I tried doing this by just doing a fixed position row, but this way seems to be a much better one. Source at bottom.
有趣的问题，我试着通过做一个固定位置的行来做到这一点，但这种方式似乎要好得多。底部的来源。
css
css
thead { display:block; background: green; margin:0px; cell-spacing:0px; left:0px; }
tbody { display:block; overflow:auto; height:100px; }
th { height:50px; width:80px; }
td { height:50px; width:80px; background:blue; margin:0px; cell-spacing:0px;}
html
html
<table>
<thead>
<tr><th>hey</th><th>ho</th></tr>
</thead>
<tbody>
<tr><td>test</td><td>test</td></tr>
<tr><td>test</td><td>test</td></tr>
<tr><td>test</td><td>test</td></tr>
</tbody>
回答by Nusky Azhar
<table class="table table-striped table-condensed table-hover rsk-tbl vScrollTHead">
<thead>
<tr>
<th>Risk Element</th>
<th>Description</th>
<th>Risk Value</th>
<th> </th>
</tr>
</thead>
</table>
<div class="vScrollTable">
<table class="table table-striped table-condensed table-hover rsk-tbl vScrollTBody">
<tbody>
<tr class="">
<td>JEWELLERY</td>
<td>Jewellery business</td>
</tr><tr class="">
<td>NGO</td>
<td>none-governmental organizations</td>
</tr>
</tbody>
</table>
</div>
.vScrollTBody{
height:15px;
}
.vScrollTHead {
height:15px;
}
.vScrollTable{
height:100px;
overflow-y:scroll;
}
having two tables for head and body worked for me
有两张用于头部和身体的桌子对我有用
