Twitter的Bootstrap可滚动表行和固定头
有谁知道如何使一个固定的标题行和可滚动的正文行的表？ 如果有问题，我正在使用twitter bootstrap。
这是我想创build的一个例子：
http://www.siteexperts.com/tips/html/ts04/page1.asp
我见过的所有例子都分成两个独立的表格。 想知道是否有人有一个更优雅的解决scheme。
Twitter引导程序还会根据内容自动调整列大小，这是我想保留在一个表中的另一个原因
只需要堆叠两个引导表; 一个用于列，另一个用于内容。 没有插件，只是纯粹的bootstrap（这不是没有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> 演示JSFiddle
内容表格div需要overflow-y:auto ，垂直滚动条。 不得不使用table-layout:fixed ，否则，列没有排队。 此外，必须把整个东西放在引导面板内，以消除表之间的空间。
还没有testing自定义列的宽度，但提供你保持宽度之间的表一致，它应该工作。
// 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'; });
这是一个jQuery插件，完全是这样的： http : //fixedheadertable.com/
用法：
$('selector').fixedHeaderTable({ fixedColumn: 1 });
设置fixedColumn选项，如果你想任何数量的列也固定水平滚动。
编辑：这个例子http://www.datatables.net/examples/basic_init/scroll_y.html在我看来是好得多，虽然有了DataTables，你需要更好地理解它是如何工作的。;
编辑2：为Bootstrap与DataTables的工作，你需要按照这里的指示： http : //datatables.net/blog/Twitter_Bootstrap_2 （我testing了这个，它的工作原理） – 对于Bootstrap 3这里有一个讨论： http：// datatables .net / forums / discussion / comment / 53462 – （我没有testing过）
有趣的问题，我试图通过做一个固定的位置行，但这种方式似乎是一个更好的。 来源于底部。
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
<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>
<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; }
有两个表头和身体为我工作
