StanSight

Fixed Table Head

Scrollable Table Body with a Fixed Table Heading
Tested to work in Firefox 3 and Internet Explorer 7. Safari users may want to check out Floating Table Titles

There is no HTML or CSS standard tag or property that lets you freeze the title row of a table in place while allowing the body to scroll up and down.

Like this:

In response to this I created the “FixedTableHead” CSS class.

I wanted a CSS solution that was easy to use. 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

Height: 100px; Width: 400px;

Height: 200px; Width:600px;

Height: 60px; Width:200px;

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>