Reputation: 47663
In 2005, Stu Nichols posted this entry about have a fixed header with scrolling rows in a table.
Is there a more updated solution to this task, or is what Stu wrote in 2005 still considered the latest?
Upvotes: 1
Views: 726
Reputation: 584
I have a good solution! Try this, see if you can understand... It's all about css display...
<html>
<head>
<meta charset="UTF-8">
<title>Ex Scrollable Table</title>
<style type="text/css">
.divScroll
{
display:block;
overflow-x: hidden;
overflow-y: scroll;
-ms-overflow-x: hidden;
-ms-overflow-y: scroll;
height: 70px;
}
.Header
{
display:table-header-group;
}
.HeaderCell
{
text-align: left;
display: table-cell;
}
.FooterCell
{
display: table-cell;
text-align: left;
}
.Row
{
display:table-row;
}
.Cell
{
display: table-cell;
}
.Footer
{
display: table-footer-group;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th class="Header">
<div class="Row">
<div class="HeaderCell" style="width:140px;">Column1</div>
<div class="HeaderCell" style="width:90px;">Column2 </div>
<div class="HeaderCell" style="width:190px;">Column3</div>
<div class="HeaderCell" style="width:100px;">Column4</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="divScroll">
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="Footer">
<div class="Row">
<div class="FooterCell" style="width:140px;">A</div>
<div class="FooterCell" style="width:90px;"> B</div>
<div class="FooterCell" style="width:190px;">C</div>
<div class="FooterCell" style="width:100px;">D</div>
</div>
</th>
</tr>
</tfoot>
</table>
</body>
</html>
Upvotes: 1
Reputation: 71
I don't know about you but I need tables which can handle dynamic width (and height). Firefox (<= 3.6) is able to handle this very well and none of the suggested frameworks seem to deal with that in a clean way. Too bad Firefox 3.7 is removing this feature as they call it a bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=552080
Feel free to vote on this issue and have the Firefox guys rethink their descition.
Upvotes: 1
Reputation: 48038
That's as current as exists AFAIK. Depending on which browsers you need to support you can use CSS to attach an overflow: scroll
to the tbody element, but it's not officially in the CSS spec and only works semi-reliably. Firefox seems to understand it, and I believe Chrome will as well, but IE ignores it enitrely.
Upvotes: 1
Reputation: 1959
If you are using jQuery there is a good plugin to do this. you can find it here
Upvotes: 1
Reputation: 86902
The second way is kinda how JQGrid handles its scrollable tables. Have a look at thier demos here. And perhaps instead of recreating the wheel you would like to use thier TableToGrid Method. This will take a html table and turn it into thier formatted grid.
Upvotes: 1