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 ]

 

Copyright ©1996 - 2018 Chin. All Rights reserved Instagram Twitter YouTube Reproduction without explicit permission is prohibited. See: Terms of use