Twitter Бутстрап с прокручиваемыми строками таблицы и фиксированным заголовком

Кто-нибудь знает, как сделать таблицу с фиксированной строкой заголовка и прокручиваемыми строками тела? Я использую twitter bootstrap, если это имеет значение.

Это пример того, что я пытаюсь создать:

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

Все примеры, которые я видел, разбивают на две отдельные таблицы. Интересно, имеет ли кто-нибудь более элегантное решение.

Twitter-бутстрап также автоматически настраивает размеры столбцов на основе контента, так что еще одна причина, по которой я хочу сохранить его в одной таблице

Ответ 1

Просто соберите две загрузочные таблицы; один для столбцов, другой для контента. Нет плагинов, просто чистый бутстрап (и это не бас, ха-ха!)

  <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, иначе столбцы не выстроились в линию. Кроме того, пришлось поместить все это в панель начальной загрузки, чтобы устранить пробел между таблицами.

Не тестировались с пользовательскими ширинами столбцов, но при условии, что ширина таблиц согласована между собой, она должна работать.

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

    });

Ответ 2

Вот плагин jQuery, который делает именно это: http://fixedheadertable.com/

Использование:

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

Установите параметр fixedColumn, если вы хотите, чтобы любое количество столбцов также было зафиксировано для горизонтальной прокрутки.

EDIT: этот пример 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 - (я не тестировал это)

Ответ 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

Ответ 4

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

у меня были две таблицы для головы и тела