Table Properties

**Yanowhiz** · 07-08-2002, 01:30 PM

14 Comic Sans Herif Green I need to know how to make a table that has the top row stay at the top of the page while scrolling down. This is used for long webpages. Please let me know how to do this.

**benzden** · 07-08-2002, 05:00 PM

Sounds more like a frames question. Never heard of <TABLE>s
doing what you want.

**Doorknob** · 07-08-2002, 08:30 PM

a static layer works too

**QuietDean** · 07-09-2002, 10:58 AM

Hiya mate.

How about posting a link to an example so we can see what you mean? thanks.

**Derek** · 09-07-2002, 04:14 PM

iframes?

**nitewing** · 09-23-2002, 02:27 AM

Try Dynamic drive website...they have some great menus that stay at the top or the bottom when scrolling.

Not a table but the same principle.

the code is in dhtml and it is cut and paste

nitewing

**ianru** · 09-23-2002, 07:25 AM

I only know how to make it in frames, you can go to http://www.gaming-power.76h.com and tell me if the thing on top is what you need or not, if you look around you will see that the top always stays on top

**nitewing** · 12-15-2002, 12:50 PM

Definitly a part of frames or an iframe....did not check source.

but the tip on dynamic drive works also or you could simply use an iframe.

nitewing

**millimeter** · 04-11-2003, 08:57 AM

I am new to this forum and have no idea how old this thread is, but I'm going to take a shot at it anyway.

Could you not put this in a span element and us a small javascript to track it's position as the page scrolled?

Millimeter

**Android** · 04-11-2003, 09:08 AM

It's funny what you find on your harddrive when you've got time to spare.
Could something like this be modified to do what you want? I can't remember where I got it, but at the time I thought it was really cool:

Code:

<html>
<head>
<title>Rolling Table</title>
</head>
<body>
Lock Table Headings<br />
We'll create the 'locked headings' effect by making the table body scrollable. In other words, by manipulating a scrollbar, we'll be able to slide the table rows under/from the table heading. Exactly what we want right?
<br>
Luckily, CSS2 allows to achieve this effect very easily, by the overflow property for block elements. The property allows us to tell what happens if the content overflows the block element's predefined dimensions.
<br>
Using 'overflow', we tell that the table body part should be scrolled if necessary.
Here's the table:
<br>


<table width="400px" border="4" title="Table Heading">
<tr><th>The amazing rolling table!!!</th></tr>
</table>
<div style="width: 400px; height: 100px; overflow: auto">
<table width="380px" border="4" title="Table Body">
  <tr><td>Item 1</td></tr>
  <tr><td>Item 2</td></tr>
  <tr><td>Item 3</td></tr>
  <tr><td>Item 4</td></tr>
  <tr><td>Itemb5</td></tr>
  <tr><td>Item 6</td></tr>
  <tr><td>Item 7</td></tr>
  <tr><td>Item 8</td></tr>
</table>
</div>

The code wraps the table body in a div element with fixed dimensions, and sets its overflow property to auto. This will make the scrollbar appear only if necessary.<br>
Also, we need to manually dimension the 'Table Heading' table exactly as wide as the 'Table Body' table.<br>
Finally, notice that we made the div element wide enough to accommodate both the table body and the scrollbar. Know that some people change their scroll bar dimensions, so you'll want to leave sufficient space here.<br>

The result shows as expected (only in browsers that implement this CSS2 spec., meaning MSIE4+, but no Netscape Navigator 4.7).<br><br>

Have fun with locked headings!
</body>
</html>

OOPS sorry 'bout my C&P gaff!

**benzden** · 04-11-2003, 09:56 AM

Try this version, too:

<br><table width=400px border=1 title=Table Heading>
<tr><th>The amazing rolling table!!!</th></tr>
<TR><TD>
<div style="width: 400px; height: 100px; overflow: auto">
<table width=380px border=0 title=Table Body>
<tr><td>Item 1</td></tr>
<tr><td>Item 2</td></tr>
<tr><td>Item 3</td></tr>
<tr><td>Item 4</td></tr>
<tr><td>Itemb5</td></tr>
<tr><td>Item 6</td></tr>
<tr><td>Item 7</td></tr>
<tr><td>Item 8</td></tr>
</table>
</div>
</TD></TR>
</TABLE>

Add BGcolor=ff0000 to each <TD ...> column cell with different colors for each for more possibilities. Am pondering a use for his at my own sites - maybe a picture pop-up alternative to the <FORM><SELECT ...> method.

View Poll Results: Do you use AOL?

Thread: Table Properties

Thread Tools

Related

CSS 3.0 Background Properties Forum: CSS Forum

Style properties not working correctly in NS 7.02 Forum: CSS Forum

Does the order of properties in CSS matter? Forum: CSS Forum

Picture Properties Forum: CSS Forum

new window properties Forum: HTML Forum

Table Properties

RE

Tags for this Thread