Make Table Headers Always Visible

Here's a static example. Basically you're just creating a scrollable div around the table rows... The the source code is displayed below.

Category 1	Name 1	Description 1
Category 2	Name 2	Description 2
Category 3	Name 3	Description 3
Category 4	Name 4	Description 4
Category 5	Name 5	Description 5
Category 6	Name 6	Description 6
Category 7	Name 7	Description 7

Source: http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_20904188.html
Accepted Answer from seanpowell, Date: 03/02/2004 09:55AM PST

<html>
<head>
<style type="text/css">
#header { background-color:#ccc; }
#scroll { overflow: auto; width: 480px; height:70px; padding:0px; margin: 0px }
</style>
</head>
<body>

<table cellspacing="0" cellpadding="2" id="header">
  <col width="100">
  <col width="150">
  <col width="218">
  <tr>
    <td>Category</td>
    <td>Name</td>
    <td>Description</td>
  </tr>
</table>

<div id="scroll">
<table cellspacing="0" cellpadding="2">
  <col width="100">
  <col width="150">
  <col width="200">
  <tr>
    <td>Category 1</td>
    <td>Name 1</td>
    <td>Description 1</td>
  </tr>
  <tr>
    <td>Category 2</td>
    <td>Name 2</td>
    <td>Description 2</td>
  </tr>
  <tr>
    <td>Category 3</td>
    <td>Name 3</td>
    <td>Description 3</td>
  </tr>
  <tr>
    <td>Category 4</td>
    <td>Name 4</td>
    <td>Description 4</td>
  </tr>
  <tr>
    <td>Category 5</td>
    <td>Name 5</td>
    <td>Description 5</td>
  </tr>
</table>
</div> 

</body>
</html>

[ Top ] [ Home ] [ Links ] [ Contact ]