Alt-Web Design & Publishing
CSS Styled Vertical-Scrolling Table

Description:

Below is a scrolling table with a stationary table header. Since fixed positioning doesn't work on a table header row <th>, I stacked two tables on top of one another. The first table contains the <th>. I then wrapped a 2nd table inside a scrolling division. All done with pure CSS; no scripts required.

Tested and works in IE6+, FF3+, Chrome, Safari, Opera.

Example:

Table heading Table heading Table heading
some content some content some content
some content some content some content
some content some content some content
some content some content some content
some content some content some content
some content some content some content
some content some content some content
some content some content some content
some content some content some content

Method:

How I survived a computer disaster

 

Spam Filter - Free Trial

CSS Code

table {width: 500px;}

#thead {
background: #008488;
color:#FFF;}

.even {
/**background on alternating table rows**/
background-color: #E4ECEE}

#scrolling {
/**allow ample width for table, padding and borders**/
width: 522px;
/**adjust as needed. If no height is declared, scrollbar won't appear**/
height: 150px;
/**vertical scrollbar**/
overflow-y:scroll;
}

 

 



Lunarpages.com Web Hosting

XHTML Code

<!--Stationary Table Header-->

<table border="1" cellspacing="5" cellpadding="5">
<tr id="thead">
<th scope="col">Table heading</th>
<th scope="col">Table heading</th>
<th scope="col">Table heading</th>
</tr>
</table>

<!--Begin Scrolling Div-->

<div id="scrolling">
<table border="1" cellspacing="5" cellpadding="5">
<tr>
<td>some content </td>
<td>some content </td>
<td>some content </td>
</tr>
<tr class="even">
<td>some content </td>
<td>some content </td>
<td>some content </td>
</tr>
<tr>
<td>some content </td>
<td>some content </td>
<td>some content </td>
</tr>
<tr class="even">
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
<tr>
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
<tr class="even">
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
<tr>
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
<tr class="even">
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
<tr>
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
</table>

<!--end scrolling --></div>

 

    bookmarks