Email This Post
Print This Post
Fixed Table Head
Thu, Jul 3, 2008 – 5:12 am by Stan SlaughterScrollable Table Body with a Fixed Table Heading
There is no current HTML or CSS standard supported across all browsers that lets you freeze the title row of a table in place while allowing the body to scroll up and down.
Like this:
| Title #1 | Title #2…. | Title #3……. | #4 |
| Item 1……….. | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
To me this is a very strange lack. It’s a common to want to fix your titles in place for long tables. The concept is so old that it has been supported in products like Microsofts Excel as “freeze panes” almost since day 1.
In response to this I decided to create the “FixedTableHead” CSS class.
I wanted a CSS solution that was easy to use. The other solutions I ran across on the web tended to be inflexible and hard to implement in real world situations. They had you hard coding table widths and heights in multiple locations in the CSS. This can be a real pain if you want to use it for multiple tables that vary in size.
“FixedTableHead” handles multiple tables of different sizes on the same page. I attempted to keep the HTML mark-up as simple as possible. All you need do is to assign a single CSS class name to a DIV that surrounds your table then
assign a height you want the table to be as an embedded style. That’s it.
Example:
<div class="FixedTableHead"> <table style="height:100px;"> <thead> ... </thead> <tbody> ... </tbody> </table> </div>
This has been tested to work in IE7, Firefox 2 and Firefox 3. As long as the table uses a THEAD and a TBODY then the header rows will remain fixed in place while the content in the table body scrolls up or down.
Height: 75px; Width: Nothing - What ever the content sizes it to
| Title #1 | Title #2…. | Title #3……. | #4 |
| Item 1……….. | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
Height: 100px; Width: 400px;
| Title #1 | Title #2…. | Title #3……. | #4 |
| Item 1……….. | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
Height: 200px; Width:600px;
| Title #1 | Title #2…. | Title #3……. | #4 |
| Item 1……….. | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
Height: 60px; Width:200px;
| Title #1 | Title #2…. | Title #3……. | #4 |
| Item 1……….. | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
| Item 1 | Item 2 | Item 3 | Item 4 |
| Itemb5 | Item 6 | Item 7 | Item 8 |
CSS Code:
<style type='text/css'>
/* DIV container around table to constrict the height for IE (IE ignores the tbody height style) */
div.FixedTableHead {
overflow-y:auto;
margin: 0px;
padding: 0px;
border: expression( '1px solid black');
/* this fixes IE so container width is same as table width */
width: expression( (this.childNodes[0].clientWidth + 17) + 'px' );
/* This fixes IE so the container height is table height plus the height of the header */
height: expression( (parseInt(this.childNodes[0].style.height) +
this.childNodes[0].childNodes[1].offsetTop + 1) +'px' );
}
/* Get rid of table cellspacing */
div.FixedTableHead table {
border-spacing: 0px;
border-collapse: collapse;
}
/* Get rid of table cellspacing */
div.FixedTableHead table td {
margin: 0px;
}
/* Scrollable Content */
.FixedTableHead table tbody {
height:100%;
overflow-x:hidden;
overflow-y:auto;
border: 1px solid black;
}
.FixedTableHead table tbody tr {
height: auto;
white-space: nowrap;
}
/* Prevent Mozilla scrollbar from hiding right-most cell content */
.FixedTableHead table tbody tr td:last-child {
padding-right: 20px;
}
/* Fixed Header for IE (firefox uses the tbody overflow assignment, which is ignored by IE) */
/* Note: In IE an element with a position property set to relative and is a child of */
/* an element that has an overflow property set, the relative value translates into fixed. */
.FixedTableHead table thead tr {
position: relative;
height: auto;
/* this fixes IE header jumping bug when mousing over rows in the tbody */
top: expression( this.parentNode.parentNode.parentNode.scrollTop + 'px' );
}
/* Formatting Header Row */
.FixedTableHead table thead tr td {
color: white;
background-color: #303433;
}
</style>