Scrollbar in a table?

malboroman · 12-18-2003

I have a question (specially for digital)...

Is it possible to have a scrollbar inside a table? Doesn't matter which language it is(php,js...) But I reaaly hate using frames, but sometimes I just need something that behaves like an i-frame.

So... is it possible?

Young Spartan · 12-19-2003

It is.

You will need to use CSS.

Here is an easy example of how it can work...

CSS:
div.scroll {overflow : auto;}

HTML:
<div class="scroll"></div>

It's actually better than iframes, because iframes push things to the left making centers look off center before it actually uses the scrollbar, this doesn't do that.

Not to mention I believe it is the valid W3C alternative to iframes.

Good luck!

Order · 12-19-2003

Quote:

Originally posted by TekVex
It is.

You will need to use CSS.

Here is an easy example of how it can work...

CSS:
div.scroll {overflow : auto;}

HTML:
<div class="scroll"></div>

It's actually better than iframes, because iframes push things to the left making centers look off center before it actually uses the scrollbar, this doesn't do that.

Not to mention I believe it is the valid W3C alternative to iframes.

Good luck!

Well... you can use the overflow: auto; property to get the effect that you need, but you will need to have an width and height property to the size of the cell...

malboroman · 12-19-2003

ok... I have been looking around for some info about implenting css in an html page.. But I've been unable to do it... Could someone explain where I have to put the code...

I'm not an expert at css... In fact I know nothing of css... so please explain it to me slowly

Young Spartan · 12-19-2003

Digital: I figured that'd come as common sense, hehe.

malboroman:
Create a file named style.css and make it contain:

div.scroll {overflow: auto;}

Then in the header of your HTML page put:
<link rel="stylesheet" type="text/css" href="style.css" />

That is assuming the CSS file is in the same directory as the HTML file, change the href="" attribute for others.

Now to insert the div in your page just put:

<div class="scroll">Content Here</div>

and as Digital said you will need width and height attributes, you can do this two ways... here they are:

div.scroll {overflow: auto; width: ###; height: ###;}

or

<div class="scroll" width="###" height="###">Content Here</div>

I recommend you use CSS to do it, because its the valid W3C standard code, but either will work.. for now.

Hope that helps.

malboroman · 12-20-2003

Quote:

div.scroll {overflow: auto; width: ###; height: ###;}

Do I have to put this code in the table? Or just in the body of the page? As you can see I'm a total nitwit when it comes to css...

Young Spartan · 12-20-2003

Yeah, you would be something like this...

Quote:

<table width="5" height="5">
<tr>
<td>
<div class="scroll">
Content
</div>
</td>
</tr>
</table>

And you would set the height and width in the CSS file to 5 and 5, so it would fit perfectly. Then if you have no border, it would look as if its the tables scrollbar, instead of a div's. But you may need to go like 4x5 or something because it may push the table, but thats for you to play with.

malboroman · 12-20-2003

I don't know what the problem is... But I can't get it to work at all... I think I'll start with the basics of css first and then move on to the more advanced stuff. Does anybody know a good site where they have css-tut's?

Young Spartan · 12-20-2003

www.w3schools.com man, great way to learn CSS.

I also really like the www.HTMLGoodies.com primer on Style Sheets.

malboroman · 12-21-2003

Allright I got it to work... but now I also have an horizontal scrollbar displayed and I don't even use it...

Is there some way to remove that scrollbar?

Young Spartan · 12-21-2003

Quote:

Originally posted by malboroman
Allright I got it to work... but now I also have an horizontal scrollbar displayed and I don't even use it...

Is there some way to remove that scrollbar?

Hmmm..

That's weird. You sure you have no images or tables inside of the <div> that are larger in width than the <div> itself? That would be the only reason I can think it would add one.

Order · 12-21-2003

Off mind, I cannot think of a way to ditch the horizontal bar, just check any images or tables within the div to see if they are bigger then the width you set.

And Tek.. you don't have to keep all the css in another document, I never do to be honest, I just include it as a <style> statement.

Young Spartan · 12-21-2003

Quote:

Originally posted by Digital
Off mind, I cannot think of a way to ditch the horizontal bar, just check any images or tables within the div to see if they are bigger then the width you set.

And Tek.. you don't have to keep all the css in another document, I never do to be honest, I just include it as a <style> statement.

I know this, but I figured asking him how many pages he is using this on would just confuse him more, so I just did it this way so he could edit one file for all the pages.

malboroman · 12-21-2003

that is the strangest thing... I had just textin the table, because I made a new document to test it. Even without any text or images the horizontal scrollbar apears.

Young Spartan · 12-21-2003

Quote:

Originally posted by malboroman
that is the strangest thing... I had just textin the table, because I made a new document to test it. Even without any text or images the horizontal scrollbar apears.

What browser are you using?