Click here to Skip to main content
15,884,237 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Fixed Headers</title>
    <link type="text/css" href="Style.css" rel="stylesheet" />
    <script type="text/javascript" src="Script.js"></script>
</head>
<body>
	<h1>Fixed Headers</h1>
	<div id="outerDiv">
		<div id="innerDiv">
			<table>
				<tr>
					<th>Table</th>
					<th>Column 1</th>
					<th>Column 2</th>
					<th>Column 3</th>
					<th>Column 4</th>
					<th>Column 5</th>
					<th>Column 6</th>
					<th>Column 7</th>
					<th>Column 8</th>
					<th>Column 9</th>
					<th>Column 10</th>
					<th>Column 11</th>
					<th>Column 12</th>
				</tr>
				<tr>
					<th>Row 1</th>
					<td>Value 1</td>
					<td>Value 2</td>
					<td>Value 3</td>
					<td>Value 4</td>
					<td>Value 5</td>
					<td>Value 6</td>
					<td>Value 7</td>
					<td>Value 8</td>
					<td>Value 9</td>
					<td>Value 10</td>
					<td>Value 11</td>
					<td>Value 12</td>
				</tr>
				<tr>
					<th>Row 2</th>
					<td>Value 1</td>
					<td>Value 2</td>
					<td>Value 3</td>
					<td>Value 4</td>
					<td>Value 5</td>
					<td>Value 6</td>
					<td>Value 7</td>
					<td>Value 8</td>
					<td>Value 9</td>
					<td>Value 10</td>
					<td>Value 11</td>
					<td>Value 12</td>
				</tr>
				<tr>
					<th>Row 3</th>
					<td>Value 1</td>
					<td>Value 2</td>
					<td>Value 3</td>
					<td>Value 4</td>
					<td>Value 5</td>
					<td>Value 6</td>
					<td>Value 7</td>
					<td>Value 8</td>
					<td>Value 9</td>
					<td>Value 10</td>
					<td>Value 11</td>
					<td>Value 12</td>
				</tr>
				<tr>
					<th>Row 4</th>
					<td>Value 1</td>
					<td>Value 2</td>
					<td>Value 3</td>
					<td>Value 4</td>
					<td>Value 5</td>
					<td>Value 6</td>
					<td>Value 7</td>
					<td>Value 8</td>
					<td>Value 9</td>
					<td>Value 10</td>
					<td>Value 11</td>
					<td>Value 12</td>
				</tr>
				<tr>
					<th>Row 5</th>
					<td>Value 1</td>
					<td>Value 2</td>
					<td>Value 3</td>
					<td>Value 4</td>
					<td>Value 5</td>
					<td>Value 6</td>
					<td>Value 7</td>
					<td>Value 8</td>
					<td>Value 9</td>
					<td>Value 10</td>
					<td>Value 11</td>
					<td>Value 12</td>
				</tr>
				<tr>
					<th>Row 6</th>
					<td>Value 1</td>
					<td>Value 2</td>
					<td>Value 3</td>
					<td>Value 4</td>
					<td>Value 5</td>
					<td>Value 6</td>
					<td>Value 7</td>
					<td>Value 8</td>
					<td>Value 9</td>
					<td>Value 10</td>
					<td>Value 11</td>
					<td>Value 12</td>
				</tr>
				<tr>
					<th>Row 7</th>
					<td>Value 1</td>
					<td>Value 2</td>
					<td>Value 3</td>
					<td>Value 4</td>
					<td>Value 5</td>
					<td>Value 6</td>
					<td>Value 7</td>
					<td>Value 8</td>
					<td>Value 9</td>
					<td>Value 10</td>
					<td>Value 11</td>
					<td>Value 12</td>
				</tr>
				<tr>
					<th>Row 8</th>
					<td>Value 1</td>
					<td>Value 2</td>
					<td>Value 3</td>
					<td>Value 4</td>
					<td>Value 5</td>
					<td>Value 6</td>
					<td>Value 7</td>
					<td>Value 8</td>
					<td>Value 9</td>
					<td>Value 10</td>
					<td>Value 11</td>
					<td>Value 12</td>
				</tr>
				<tr>
					<th>Row 9</th>
					<td>Value 1</td>
					<td>Value 2</td>
					<td>Value 3</td>
					<td>Value 4</td>
					<td>Value 5</td>
					<td>Value 6</td>
					<td>Value 7</td>
					<td>Value 8</td>
					<td>Value 9</td>
					<td>Value 10</td>
					<td>Value 11</td>
					<td>Value 12</td>
				</tr>
				<tr>
					<th>Row 10</th>
					<td>Value 1</td>
					<td>Value 2</td>
					<td>Value 3</td>
					<td>Value 4</td>
					<td>Value 5</td>
					<td>Value 6</td>
					<td>Value 7</td>
					<td>Value 8</td>
					<td>Value 9</td>
					<td>Value 10</td>
					<td>Value 11</td>
					<td>Value 12</td>
				</tr>
				<tr>
					<th>Row 11</th>
					<td>Value 1</td>
					<td>Value 2</td>
					<td>Value 3</td>
					<td>Value 4</td>
					<td>Value 5</td>
					<td>Value 6</td>
					<td>Value 7</td>
					<td>Value 8</td>
					<td>Value 9</td>
					<td>Value 10</td>
					<td>Value 11</td>
					<td>Value 12</td>
				</tr>
				<tr>
					<th>Row 12</th>
					<td>Value 1</td>
					<td>Value 2</td>
					<td>Value 3</td>
					<td>Value 4</td>
					<td>Value 5</td>
					<td>Value 6</td>
					<td>Value 7</td>
					<td>Value 8</td>
					<td>Value 9</td>
					<td>Value 10</td>
					<td>Value 11</td>
					<td>Value 12</td>
				</tr>
				<tr>
					<th>Row 13</th>
					<td>Value 1</td>
					<td>Value 2</td>
					<td>Value 3</td>
					<td>Value 4</td>
					<td>Value 5</td>
					<td>Value 6</td>
					<td>Value 7</td>
					<td>Value 8</td>
					<td>Value 9</td>
					<td>Value 10</td>
					<td>Value 11</td>
					<td>Value 12</td>
				</tr>
				<tr>
					<th>Row 14</th>
					<td>Value 1</td>
					<td>Value 2</td>
					<td>Value 3</td>
					<td>Value 4</td>
					<td>Value 5</td>
					<td>Value 6</td>
					<td>Value 7</td>
					<td>Value 8</td>
					<td>Value 9</td>
					<td>Value 10</td>
					<td>Value 11</td>
					<td>Value 12</td>
				</tr>
				<tr>
					<th>Row 15</th>
					<td>Value 1</td>
					<td>Value 2</td>
					<td>Value 3</td>
					<td>Value 4</td>
					<td>Value 5</td>
					<td>Value 6</td>
					<td>Value 7</td>
					<td>Value 8</td>
					<td>Value 9</td>
					<td>Value 10</td>
					<td>Value 11</td>
					<td>Value 12</td>
				</tr>
				<tr>
					<th>Row 16</th>
					<td>Value 1</td>
					<td>Value 2</td>
					<td>Value 3</td>
					<td>Value 4</td>
					<td>Value 5</td>
					<td>Value 6</td>
					<td>Value 7</td>
					<td>Value 8</td>
					<td>Value 9</td>
					<td>Value 10</td>
					<td>Value 11</td>
					<td>Value 12</td>
				</tr>
				<tr>
					<th>Row 17</th>
					<td>Value 1</td>
					<td>Value 2</td>
					<td>Value 3</td>
					<td>Value 4</td>
					<td>Value 5</td>
					<td>Value 6</td>
					<td>Value 7</td>
					<td>Value 8</td>
					<td>Value 9</td>
					<td>Value 10</td>
					<td>Value 11</td>
					<td>Value 12</td>
				</tr>
				<tr>
					<th>Row 18</th>
					<td>Value 1</td>
					<td>Value 2</td>
					<td>Value 3</td>
					<td>Value 4</td>
					<td>Value 5</td>
					<td>Value 6</td>
					<td>Value 7</td>
					<td>Value 8</td>
					<td>Value 9</td>
					<td>Value 10</td>
					<td>Value 11</td>
					<td>Value 12</td>
				</tr>
				<tr>
					<th>Row 19</th>
					<td>Value 1</td>
					<td>Value 2</td>
					<td>Value 3</td>
					<td>Value 4</td>
					<td>Value 5</td>
					<td>Value 6</td>
					<td>Value 7</td>
					<td>Value 8</td>
					<td>Value 9</td>
					<td>Value 10</td>
					<td>Value 11</td>
					<td>Value 12</td>
				</tr>
				<tr>
					<th>Row 20</th>
					<td>Value 1</td>
					<td>Value 2</td>
					<td>Value 3</td>
					<td>Value 4</td>
					<td>Value 5</td>
					<td>Value 6</td>
					<td>Value 7</td>
					<td>Value 8</td>
					<td>Value 9</td>
					<td>Value 10</td>
					<td>Value 11</td>
					<td>Value 12</td>
				</tr>
			</table>
		</div>
	</div>
</body>
</html>
<script language="javascript">
	CreateScrollHeader(document.getElementById("innerDiv"), true, true);
</script>

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