35

有谁知道如何制作具有固定标题行和可滚动正文行的表格？如果这很重要，我正在使用 twitter 引导程序。

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

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

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

Twitter bootstrap 还会根据内容自动调整列大小，这是我想将其保留在一个表中的另一个原因

4

4 回答 4

52

只需堆叠两个引导表；一个用于列，另一个用于内容。没有插件，只是纯粹的引导程序（这不是没有 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

内容表 div 需要overflow-y:auto, 用于垂直滚动条。必须使用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';

    });
于 2013-12-29T00:52:32.373 回答
9

这是一个 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 - （我没有测试过这个）

于 2013-03-05T02:47:03.203 回答
4

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

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

于 2012-07-14T12:19:24.593 回答
0 
<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>&nbsp;</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;
}

有两张用于头部和身体的桌子对我有用

于 2015-10-14T03:48:36.973 回答