PDA

View Full Version : Scrollable Table


Death Dream
03-25-2008, 05:09 PM
I have seen many div tags such as:
<div style="width: 200px; height: 200px; overflow: scroll;">
</div>
First I would like to ask that you look at the attached picture. I have one main table with sub tables that I want to be able to scroll within the main one. Right now only 3 games are seen but I want it to be when you scroll down that you see the other games. I would like to have the scroll bar on the far right but don't know how to do this.

I might of messed up already because every time I find out a new way to do a scroll bar it needs to be within a Table Cell. Well the 3 sub tables are not placed in a table cell, so do I have to redo this and put them inside a table cell or is there a way to do this that I am not seeing?

BTW: The Red Text says "Want Scroll Bar here" I had to really decrease the quality of the image to upload it.

Thanks,
Death Dream

domedia
03-25-2008, 05:40 PM
The code you wrote above will create this scroll bar for you.

Death Dream
03-25-2008, 06:01 PM
So say:

<Table>
<div style="width: 200px; height: 200px; overflow: scroll;">
<table>
<tr><td></td></tr>
</table>
<table>
<tr><td></td></tr>
</table>
<table>
<tr><td></td></tr>
</table>
</div>
</table>


Should work without a problem?

domedia
03-25-2008, 06:53 PM
Yes, but remove the outer table tags. Yable tags can only have <tr> directly inside them.

Death Dream
03-25-2008, 07:21 PM
If I do that it kind of pushes everything that was inside that table outside it. So my main table I had that was replaced with DIV tags instead has been thrown below the horizontal scroll bar now. and I put the </div> at the end where the </table> tag was located.

Any ideas?

~Death Dream~

domedia
03-25-2008, 07:30 PM
No, because I don't know what you're talking about :) (url?)
But these 2 tags can never be like this:
<table><div>

Ricky55
03-25-2008, 08:19 PM
i think you may be at cross purposes here.

Dom is telling you the correct method of creating a scrolling window when using CSS. From what I can gather your design seems to be table based.

Although you should be working with CSS you can do this using the more traditional method of an iFrame.

If you insert this code inside your table cell it will load into that cell the htnl page you specify.


<iframe frameborder="0" height="223" width="141" src="yourpage.html"></iframe>

domedia
03-25-2008, 08:46 PM
You can put the DIV right inside a table cell as well.. not sure what the benefit would be Ricky..

Ricky55
03-25-2008, 08:55 PM
It just seemed to be more inline with his method of construction.

Death Dream
03-25-2008, 08:57 PM
Dom is telling you the correct method of creating a scrolling window when using CSS. From what I can gather your design seems to be table based.

Although you should be working with CSS you can do this using the more traditional method of an iFrame.

Yes my design is Table based. I am not aware of a way I can draw Divs and cells graphically like I can with tables. If there is a way then I would like to know.

Also, aren't frames a bad way to go? Something about making

Anyways, that didn't work the way I wanted either, it pretty much made a white square. Here is my code with the Iframe:

I left the width and height alone by mistake but no change happened anyways.


<table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr><iframe frameborder="0" height="223" width="141" src="base.html">
<td width="208" height="224" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="208" height="35" valign="top"><img src="Images/SupportedGames/CabalTitle.gif" width="208" height="35"></td>
</tr>
<tr>
<td height="148" valign="top"><img src="Images/SupportedGames/CabalCenter.gif" width="208" height="148"></td>
</tr>
<tr>
<td height="41" valign="center" background="Images/SupportedGames/PlainforDNL.gif"><div align="center"><img src="Images/SupportedGames/DownloadNow.gif" width="105" height="29"></div></td>
</tr>



</table></td>
<td width="16" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
<td width="208" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="208" height="35" valign="top"><img src="Images/SupportedGames/AionTitle.gif" width="208" height="35"></td>
</tr>
<tr>
<td height="148" valign="top"><img src="Images/SupportedGames/AionCenter.gif" width="208" height="148"></td>
</tr>
<tr>
<td height="41" valign="top"><img src="Images/SupportedGames/ComingSoon.gif" width="208" height="41"></td>
</tr>



</table></td>
<td width="16" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
<td width="208" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="208" height="35" valign="top"><img src="Images/SupportedGames/RequiemTitle.gif" width="208" height="35"></td>
</tr>
<tr>
<td height="148" valign="top"><img src="Images/SupportedGames/RequiemCenter.gif" width="208" height="148"></td>
</tr>
<tr>
<td height="41" valign="top"><img src="Images/SupportedGames/ComingSoon.gif" width="208" height="41"></td>
</tr>


</table></td>
<td width="19">&nbsp;</td>
</iframe></tr>
</table>~Death Dream~

domedia
03-25-2008, 09:10 PM
death, this is not very hard to do. There is no reason whatsoever you cannot add a scrolling div into your table design :)
And please don't use frames, although if you want to that will work as well.
Can you please provide all the code, preferably on the web through a url?
What you're looking for is soo easy.. just adding 2 lines of code to your website.

Death Dream
03-25-2008, 09:42 PM
death, this is not very hard to do. There is no reason whatsoever you cannot add a scrolling div into your table design :)
And please don't use frames, although if you want to that will work as well.
Can you please provide all the code, preferably on the web through a url?
What you're looking for is soo easy.. just adding 2 lines of code to your website.

The simplest of tasks yet I can't get it to work with my design, pretty lame lol.

Anyways I uploaded it to: http://dd.adesadesmoines.com/base.html

The design did get a lil screwed up but nothing I can't fix later and shouldn't affect what I want to do for the moment.

~Death Dream~

domedia
03-25-2008, 10:09 PM
Just add a div after this line here:
<td width="675" valign="top">
<div style="overflow: scroll; height: 100px;">
your stuff and tables here
</div>
</td>

BTW; the site could have been done with 90% less code if you had gone the web standards way ;)

Death Dream
03-25-2008, 10:26 PM
Just add a div after this line here:
<td width="675" valign="top">
<div style="overflow: scroll; height: 100px;">
your stuff and tables here
</div>
</td>

BTW; the site could have been done with 90% less code if you had gone the web standards way ;)

I'm old fashion I guess =D

I'll try the code and see what happens.

Edit: Well it worked but how do I get rid of the horizontal scroll bar?

~Death Dream~

Ricky55
03-26-2008, 01:47 PM
Both these methods will work trust me.

The iFrame method will leave a white space until you create a black html file to load into it and you must set the dimensions correctly.

Divs are not drawn they're coded, laid out and sized with CSS.

CSS is not that hard to get into, you should try to learn before you get stuck in the table ways. The longer you spend working with tables the harder you'll find the transition. I'm speaking from personal exp here.

Death Dream
03-26-2008, 02:18 PM
I think I am already in that stage, I have been working with tables for 4-5 (?) years now.

I hear a lot about CSS and when I see the code I can't believe how simple some of the things.

~Death Dream~

Death Dream
03-27-2008, 04:34 PM
Going to try to redesign this site with CSS, on this post I will be posting updates and so on about it and getting help I hope lol.

http://www.dreamweaverclub.com/forum/showthread.php?p=136741#post136741

~Death Dream~

Ricky55
03-27-2008, 10:23 PM
Death dream are you OK with this or do you still need help?

Death Dream
03-27-2008, 11:50 PM
I understand how the Div tag works but I do not want a horizontal bar on it. And I am redesigning the site from the ground up using CSS. So I guess the help should be tossed to my other thread I posted about above. ~Death Dream~

Rob_Che
03-28-2008, 09:16 AM
If you have the horizontal scroll set to "auto" does it get rid of it ?
This should only form a scroll bar when the content is too wide...

This is how it works on iFrames but I haven't done this in CSS yet... :smile:

Rob_Che
03-28-2008, 09:24 AM
Looking through some discussion online... 2 things...
1: It appears that it's only in Firefox.. is that your case?
2: div set to 100% and overflow: hidden should cure it...

That's just surfing tho so these problems may have been superseded with newer bigger problems :wink:

Rob

Death Dream
03-28-2008, 08:02 PM
We should really talk on the other topic instead of having two now because I changed from Tables to Divs with CSS on this layout now.

But if you want to see the current page of the site you can see it here: http://dd.adesadesmoines.com/Untitled-4.html

~Death Dream~