Twitter Bootstrap可滚动表行和固定头 [英] Twitter Bootstrap scrollable table rows and fixed header

问题描述

有没有人知道如何做一个固定的标题行和可滚动主体行的表？我使用twitter bootstrap如果这很重要。

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.

这是我要创建的示例

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引导还会根据内容自动调整列大小，这是我想将其保存在一个表中的另一个原因

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

推荐答案

只要堆栈两个引导表;一个用于列，另一个用于内容。没有插件，只是纯bootstrap（这不是没有bs，哈哈！）

Just stack two bootstrap tables; one for columns, the other for content. No plugins, just pure bootstrap (and that ain't no bs, haha!)

  <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 ，否则，列没有排队。此外，不得不将整个内容放在引导面板中以消除表之间的空间。

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.

没有测试自定义列宽，但是提供了保持宽度表，它应该工作。

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

    });

这篇关于Twitter Bootstrap可滚动表行和固定头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！