Twitter Bootstrap可滚动表行和固定头

问题描述

有没有人知道如何做一个固定的标题行和可滚动主体行的表？我使用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.

这是我要创建的示例

我看到的所有例子都将它分成两个独立的表。想知道是否有人有一个更优雅的解决方案。

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>

内容表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可滚动表行和固定头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！