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.
This is an example of what I'm trying to create:
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 bootstrap also automatically adjusts the column sizes based on content so that's another reason I'd like to keep it in one table
This question is related to
jquery
css
twitter-bootstrap
Interesting question, I tried doing this by just doing a fixed position row, but this way seems to be a much better one. Source at bottom.
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>
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>
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';
});
<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;
}
having two tables for head and body worked for me
Here is a jQuery plugin that does exactly that: http://fixedheadertable.com/
Usage:
$('selector').fixedHeaderTable({ fixedColumn: 1 });
Set the fixedColumn
option if you want any number of columns to be also fixed for horizontal scrolling.
EDIT: This example http://www.datatables.net/examples/basic_init/scroll_y.html is much better in my opinion, although with DataTables you'll need to get a better understanding of how it works in general.
EDIT2: For Bootstrap to work with DataTables you need to follow the instructions here: http://datatables.net/blog/Twitter_Bootstrap_2 (I have tested this and it works)- For Bootstrap 3 there's a discussion here: http://datatables.net/forums/discussion/comment/53462 - (I haven't tested this)
Source: Stackoverflow.com