Level Extreme platform
Subscription
Corporate profile
Products & Services
Support
Legal
Français
How can I make non-scrolling table headers?
Message
From
16/05/2002 05:47:27
 
 
To
15/05/2002 15:21:37
Mike Sue-Ping
Cambridge, Ontario, Canada
General information
Forum:
Internet
Category:
HTML
Miscellaneous
Thread ID:
00657098
Message ID:
00657300
Views:
22
>Hi all,
>
>I've created a table using the
<table>, <th>, <tr> and <td>
tags that produces many rows of data. The table has a vertical scrollbar that allows the table to scroll when all of the rows cannot be displayed at one time. This is as I expected, however, the table headers scroll out of sight as well and I would prefer to have them always visible!
>
>How can I make the table headers stay put and not scroll? I've seen some solutions that use javascript or "overflow" but these seem too complex for my level. Is there an easier way? I've tried using a frame for the headers but that has problems when trying to determine the correct column widths.
>
>Anyone have a solution? I can't believe that the standard did not include an option to make this happen automatically.
>
>TIA
>
>Mike

I came up with the following solution for Bret Hobbs back in December based on an IFRAME inside the table. I don't know if you will find it suitable - you do have to tweak widths to get the headers & columns to line up.

TEST1.HTML
<html>
<body>
<table style='margin:"0%"; padding:"0%"' border=1>
 <tr>
  <td width="33%">Header1</td>
  <td width="32%">Header2</td>
  <td width="32%">Header3</td>
  <td></td>
  <td></td>
 </tr>
 <tr style='margin:"0%"; padding:"0%"' width="100%">
  <td colspan=5 style='margin:"0%"; padding:"0%"' width="100%">
  <iframe src="test2.html" frameborder=0 style='margin:"0%"; padding:"0%"' width="100%">	
  </td>
 </tr>
</table>
</body>
</html>
TEST2.HTML
<html>

<body style='margin:"0%"; padding:"0%"'>
<table width="100%"  style='margin:"0%"; padding:"0%"' border=1>
 <colgroup>
  <col width="30%">
  <col width="30%">
  <col width="30%">
 </colgroup>
 <tbody>
  <tr><td>xxxxx</td><td>xxxxx</td><td>xxxxx</td></tr>
  <tr><td>xxxxx</td><td>xxxxx</td><td>xxxxx</td></tr>
  <tr><td>xxxxx</td><td>xxxxx</td><td>xxxxx</td></tr>
  <tr><td>xxxxx</td><td>xxxxx</td><td>xxxxx</td></tr>
  <tr><td>xxxxx</td><td>xxxxx</td><td>xxxxx</td></tr>
  <tr><td>xxxxx</td><td>xxxxx</td><td>xxxxx</td></tr>
  <tr><td>xxxxx</td><td>xxxxx</td><td>xxxxx</td></tr>
  <tr><td>xxxxx</td><td>xxxxx</td><td>xxxxx</td></tr>
  <tr><td>xxxxx</td><td>xxxxx</td><td>xxxxx</td></tr>
  <tr><td>xxxxx</td><td>xxxxx</td><td>xxxxx</td></tr>
  <tr><td>xxxxx</td><td>xxxxx</td><td>xxxxx</td></tr>
  <tr><td>xxxxx</td><td>xxxxx</td><td>xxxxx</td></tr>
  <tr><td>xxxxx</td><td>xxxxx</td><td>xxxxx</td></tr>
  <tr><td>xxxxx</td><td>xxxxx</td><td>xxxxx</td></tr>
  <tr><td>xxxxx</td><td>xxxxx</td><td>xxxxx</td></tr>
  <tr><td>xxxxx</td><td>xxxxx</td><td>xxxxx</td></tr>
  <tr><td>xxxxx</td><td>xxxxx</td><td>xxxxx</td></tr>
  <tr><td>xxxxx</td><td>xxxxx</td><td>xxxxx</td></tr>
  <tr><td>xxxxx</td><td>xxxxx</td><td>xxxxx</td></tr>
  <tr><td>xxxxx</td><td>xxxxx</td><td>xxxxx</td></tr>
  <tr><td>xxxxx</td><td>xxxxx</td><td>xxxxx</td></tr>
 </tbody>
</table>
</body>
</html>
Len Speed
Previous
Next
Reply
Map
View

Click here to load this message in the networking platform