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


Accepted Answer from seanpowell, Date: 03/02/2004 09:55AM PST

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

<table cellspacing="0" cellpadding="2" id="header">
  <col width="100">
  <col width="150">
  <col width="218">

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




[ Top ] [ Home ]


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