Twitter Bootstrap可滚动表行和固定标题

Question

有谁知道如何制作一个固定标题行和可滚动的主体行的表？如果重要的话,我正在使用twitter bootstrap.

这是我正在尝试创建的示例:

http://www.siteexperts.com/tips/html/ts04/page1.asp

我见过的所有例子都将它分成两个单独的表.想知道是否有人有更优雅的解决方案.

Twitter引导程序还会根据内容自动调整列大小,这是我希望将其保留在一个表中的另一个原因

Answer 1

只需堆叠两个引导表; 一个用于列,另一个用于内容.没有插件,只是纯粹的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>

Demo JSFiddle

overflow-y:auto对于垂直滚动条,内容表div需要.不得不使用table-layout:fixed,否则,列不排队.此外,必须将整个内容放在引导板中以消除表之间的空间.

尚未使用自定义列宽进行测试,但如果保持表之间的宽度一致,则应该可以正常工作.

    // 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';

    });

Answer 2

这是一个jQuery插件,它正是这样做的:http: //fixedheadertable.com/

用法:

$('selector').fixedHeaderTable({ fixedColumn: 1 });

fixedColumn如果要为水平滚动修复任意数量的列,请设置该选项.

编辑:这个例子http://www.datatables.net/examples/basic_init/scroll_y.html在我看来要好得多,尽管使用DataTables你需要更好地了解它的工作原理.

EDIT2:要使Bootstrap与DataTables一起使用,你需要按照这里的说明操作:http://datatables.net/blog/Twitter_Bootstrap_2(我已经测试了这个并且它可以工作) - 对于Bootstrap 3,这里有一个讨论:http:// datatables .net/forums/discussion/comment/53462 - (我还没有测试过这个)

Answer 3

有趣的问题，我尝试通过只做固定位置行来做到这一点，但这种方式似乎更好。来源在底部。

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>

http://www.imaputz.com/cssStuff/bigFourVersion.html