web-dev-qa-db-fra.com

Lignes de défilement Twitter Bootstrap et en-tête fixe

Est-ce que quelqu'un sait comment faire un tableau avec une ligne d'en-tête fixe et des lignes de corps défilables? J'utilise Twitter bootstrap si cela compte. 

Voici un exemple de ce que j'essaie de créer:

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

Tous les exemples que j'ai vus le divisent en deux tableaux distincts. Je me demandais si quelqu'un avait une solution plus élégante. 

Twitter bootstrap ajuste également automatiquement la taille des colonnes en fonction du contenu, ce qui est une autre raison pour laquelle je souhaite le conserver dans un seul tableau.

jquerycsstwitter-bootstrap
35
Jeff Locke

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

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

    });
51
raffian

Voici un plugin jQuery qui fait exactement cela: http://fixedheadertable.com/

Usage:

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

Définissez l'option fixedColumn si vous souhaitez également fixer un nombre quelconque de colonnes pour le défilement horizontal.

EDIT: Cet exemple http://www.datatables.net/examples/basic_init/scroll_y.html est bien meilleur à mon avis, bien qu'avec DataTables vous aurez besoin de mieux comprendre comment fonctionne en général.

EDIT2: Pour que Bootstrap fonctionne avec DataTables, vous devez suivre les instructions ici: http://datatables.net/blog/Twitter_Bootstrap_2 (J'ai testé cela et cela fonctionne) - Pour Bootstrap 3, il y a une discussion ici: http://datatables.net/forums/discussion/comment/53462 - (Je n'ai pas testé cela)

9
Panickos Neophytou

Question intéressante, j'ai essayé de le faire en faisant simplement une rangée de positions fixes, mais cette voie semble être bien meilleure. Source en bas.

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

avoir deux tables pour la tête et le corps a fonctionné pour moi

0
Nusky Azhar