Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : Scrollbars in tables

[Teh Plug]

Is there a way to do it? so I have only a table that scrolls down which will contain more content, and not the whole page?

[UH-Matt]

Use an iframe to achieve this.

[Rich2k]

You can do it in DHTML, but it's not worth the effort IMHO when you can do it in iframes

[Teh Plug]

Well I've never used frames before, so how would I do it?

Edit: Never mind, I saw the other topic in here about it, and have done it Thanks

[sinthetiq]

what did u use?

i only know how to use <div>

[Rich2k]

Read this forum... loads of threads about iframes alone!

[mitchikoy]

we can create a tbody in css with this code

tbody {
height: 20;
overflow: scroll;
}


then just put a <tbody> tag before
<tbody>
<tr><td>body</td></tr> ... ... ..
</tbody>

works only in netscape though...

[Reptilian Feline]

Overflow to create a scrollbar works in IE as well.

[mitchikoy]

Originally posted by Reptilian Feline
Overflow to create a scrollbar works in IE as well.

do i have to use tbody?
i dont know why but it seems that it doesn't work. on my IE... oh well i love using mozilla-firebird so i uges its ok.

[Reptilian Feline]

Put a div inside the TD and make that scrollable instead. Post some code and I'll test a couple of variations for you.

[mitchikoy]

Originally posted by Reptilian Feline
Put a div inside the TD and make that scrollable instead. Post some code and I'll test a couple of variations for you.

oh you could do that all right...
but its just so hard aligning the headers to the body.

so i used tbody.
you cant use the <DIV> outside the <TD>.
and you cant use the <DIV> inside the table either. so get the picture... you have to create a separate <TABLE> for the header and the body its so hard to align.

[hdezela]

HTML:

<table width="450" border="1" cellspacing="0" cellpadding="0">
     <tr height="80">
          <td width="90" height="80">
               <span class="scroll">
                    This will scroll.
               </span>
          </td> 
     </tr>
</table>

CSS:

.scroll  { width: 100%; height: 100%; overflow: auto }

By using span, instead of div, you can make it fill just the cell you're working in.