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.
Просто сложите две таблицы начальной загрузки; один для столбцов, другой для контента. Никаких плагинов, только чистый загрузчик (и это, хаха!)
<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
, иначе столбцы не выстраивались. Кроме того, пришлось поместить все это в панель начальной загрузки, чтобы устраанать растрана н ьт.
Не тестировали с пользовательскими значениями ширины столбцов, но при условии, что вы сохраняете одинаковую ширину между таблицами, это должно работать.
// 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';
});
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)
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>
<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> </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