Fixed-position Table Header

Some tables are long enough that they require vertical scrolling to view all the information. The header generally scrolls out of view along with the rest of the top portion of the table.

It is possible for the table header to remain visible as the rest of the table scrolls upward.

A reason for doing that is when the header contains important information about what the column represents, columns of numbers perhaps. Another reason is to make the page more user friendly. Also for a sense of aesthetics.

The scrollbars are on the div that contains the table. If the div is wider than the table, the scrollbar will be some distance from the table's right.

The following example is for illustration.

(The color values for the table were obtained from Color Selector for the Color Blind.

Here is the source code used by the example. The 4 required CSS definitions are colored blue. Other CSS definitions (colored, but not blue) are also important to be aware of, but not required for functionality.

<div style="height:200px; position:relative; overflow:auto; border:3px solid #ccc; border-radius:3px;">
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;">
<thead style="position:sticky; top:0px;">
<tr>
<th style="padding:0; background-color:white;"><div style="outline:1px solid black; padding:6px;">&nbsp;<br>Color<br>Name</div></th>
<th style="padding:0; background-color:white;"><div style="outline:1px solid black; padding:6px;">Color<br>HEX<br>Value</div></th>
<th style="padding:0; background-color:white;"><div style="outline:1px solid black; padding:6px;">Color<br>RGB<br>Values</div></th>
<th style="padding:0; background-color:white;"><div style="outline:1px solid black; padding:6px;">Color<br>HSL<br>Values</div></th>
</tr>
</thead>
<tbody>
<tr><td>Blue</td><td>0000ff</td><td>0,0,255</td><td>240,100%,50%</td></tr>
<tr><td>Red</td><td>ff0000</td><td>255,0,0</td><td>0,100%,50%</td></tr>
<tr><td>Brown</td><td>a32c2e</td><td>163,44,46</td><td>359,57%,41%</td></tr>
<tr><td>Pink</td><td>fec1cc</td><td>254,193,204</td><td>349,97%,88%</td></tr>
<tr><td>Silver</td><td>c0c0c0</td><td>192,192,192</td><td>0,0%,75%</td></tr>
<tr><td>Gold</td><td>fed631</td><td>254,214,49</td><td>48,99%,59%</td></tr>
<tr><td>Green</td><td>00ff00</td><td>0,255,0</td><td>120,100%,50%</td></tr>
<tr><td>Skyblue</td><td>8acfea</td><td>138,207,234</td><td>197,70%,73%</td></tr>
</tbody>
</table>
</div>

If you'll pop the source code into a test web page, it will work as is. Still, there are items to be aware of in case you need to tweak them for your own table.

The table is in a div tag. This allows me to demonstrate the fixed table header when the scrollbars are used. (If you don't use a div tag, the scrollbars would only show up when the page content is longer than the browser window will hold.)

Notes —

The 4 Required CSS Definitions:

Two of the required definitions are in the div tag and two are in the table's thead tag.

1. If your table is in a div (like the example), the div must have the position:relative; CSS definition.

2. If your table is in a div (like the example), the div must have the overflow:auto; CSS definition.

Those two CSS definitions put the scrollbar where it is supposed to be, on the right edge of the div, when the table is longer than the div containing it.

3. The thead tag needs the position:sticky; CSS definition. It tells the browser that the header will be sticky when it is located in a certain position.

4. The thead tag needs the top:0px; CSS definition. It tells the browser that the position where the table header becomes sticky is 0 pixels from the top edge of the div. The 0px may be changed to fix the header in a different position.

Some Other Important CSS Definitions:

You'll notice that the table headers themselves are styled with a bunch of CSS. Without the CSS, the table lines would show through the headers area when the table is scrolled.

The CSS for the headers give the table header areas a background color of white. It also puts borders around the header areas (because specifying a background color tends to remove normal table borders.)

• The th tag has (1) CSS definition padding:0; and (2) CSS definition background-color:white; for (1) removing any padding that may be specified in the table tag and (2) specifying the background color.

• The content of the th tag is in a div. The div tag has (1) CSS definition outline:1px solid black; and (2) CSS definition padding:6px; for (1) publishing the border and (2) padding the div so the text in the header will not touch the border.

With those, the header area of the table is formatted to look good while the upper part of the table scrolls up underneath it.

The CSS design of the table may be tweaked, of course. I've mentioned the required CSS definitions and some of the important ones.

The example has some CSS I didn't mention, which you will probably recognize and know what it is for. You may add additional CSS, too, if there are some that will get you closer to the design you are looking for.

A scrolling table with a fixed-position header might raise the sense of elegance your website has.

(This content first appeared in Possibilities newsletter.)

Will Bontrager