A fixed table header

Sometimes the application analyst gives me little choice and assumes
I can do anything with HTML
and CSS.
One frequent request when displaying tabular data is to scroll through
the contents while keeping the table header in view.

Ondrej Ivanič outlined a very nice solution in an earlier article (June 4, 2003),
Rozsiahle tabuľky a CSS.
My solution was less elegant, but it met the need without using client-side
scripting.

An alternative approach

HTML code:

 
  <table >
   <tr>
     <th>head1</th>
     <th>head2</th>
     <th>head3</th>
   </tr>
   <tr>
     <td colspan="3">
	<div id="scroll-area">
          <table >
		<tr>
     		  <td>some value</td>
                  <td>some value</td>
                  <td>some value</td>
                </tr>
		<tr>
     		  <td>some value</td>
                  <td>some value</td>
                  <td>some value</td>
                </tr>              
          </table>
	</div>
     </td>
   </tr>
  </table>	

CSS code:

#scroll-area{
      overflow:scroll;
      float:left;
      height:50px;      			 
      margin:0px 0px 0px 0px;
      padding:0px 0px 0px 0px;
}

My solution starts by merging the columns
of the row after the header. Inside that row it creates a new
table with the same number of columns. To let the contents scroll,
the inner table sits in a multiline container
(a div) with the scrolling properties
overflow:scroll and others.