Click here to Skip to main content
15,885,141 members
Articles / Programming Languages / Javascript

Fixed headers in large HTML tables

Rate me:
Please Sign up or sign in to vote.
4.76/5 (34 votes)
24 Jun 2006CPOL2 min read 371.2K   10.7K   53  
There are quite a lot of ways to fix the header column and rows in HTML tables. But when tables become larger, most of them are not useful because scrolling gets far too slow. In this article, I will show an applicable way for IE.
body, td, p
{
	font-family: Verdana;
	font-size: 10pt;
}
h1
{
	font-family: Verdana;
	font-size: 14pt;
}
table
{
	border-collapse: collapse;
}
td, th
{
	border-top: solid 1px #666666;
	border-bottom: solid 1px #666666;
	white-space: nowrap;
	padding-left: 10px;
	padding-right: 10px;
	text-align: left;
}
th
{
	background-color: #666666;
	color: #ffffff;
}
#outerDiv
{
	position: relative;
}
#innerDiv
{
	overflow: auto;
}
#innerDiv td
{
	white-space: nowrap;
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer software architects
Austria Austria
Hi, my name is Karin Huber. Since 1998 I have been working as a developer and IT consultant focusing on building database oriented web applications. In 2007 my friend Rainer and I decided that we want to build a business based on COTS (component off-the-shelf) software. As a result we founded "software architects".

These days we are offering our first version of the time tracking software called 'time cockpit'. You can find more information at www.timecockpit.com.

Comments and Discussions