PDA

View Full Version : Scrollbars within tables



ella_tall
Nov 26th, 2006, 02:06 PM
I know tables are bad and wrong, but I don't have the time to learn CSS - this website has to be finished tonight. Argh.

Basically, I'd really appreciate it if someone could tell me what code to use to create a scrollbar within one cell of a table, to stop my table from having to stretch when my text overruns. Cheers.

Here is my template code - you'll notice I've used css (which I know nothing about whatsoever) in a failed attempt to solve the problem.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Alford Morris</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META name="keywords" content="morris, alford, morris men, bells, world famous alford morris, alford windmill, folk dancing, lincolnshire">
<!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable -->
<style type="text/css">
.scroll {
overflow: scroll;
}
</style>
</head>

<body bgcolor="#FFFFCC" text="#000000" link="#000000" vlink="#000000" alink="#000000">
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="800" height="634" border="0" align="center" cellpadding="0" cellspacing="0" background="/backgroundsmall.png">
<tr>
<td width="150" height="117">&nbsp;</td>
<td width="500">&nbsp;</td>
<td width="150">&nbsp;</td>
</tr>
<tr>
<td width="150" height="80">&nbsp;</td>
<td width="500" align="center" valign="middle">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="500" height="80">
<param name="movie" value="/Images/30yrsbanner.fla">
<param name="quality" value="high">
<embed src="/Images/30yrsbanner.fla" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="80"></embed></object></td>
<td width="150">&nbsp;</td>
</tr>
<tr>
<td width="150" height="30">&nbsp;</td>
<td width="500" height="30" align="center" valign="middle"> <a href="/index.html">
<map name="Map">
<area shape="rect" coords="0,1,59,30" href="../index.html">
<area shape="rect" coords="60,1,116,30" href="../about.html">
<area shape="rect" coords="115,1,184,30" href="../history.html">
<area shape="rect" coords="184,1,247,30" href="../events.html">
<area shape="rect" coords="245,1,311,30" href="../photos.htm">
<area shape="rect" coords="309,1,377,30" href="../people.html">
<area shape="rect" coords="378,1,427,30" href="../links.html">
<area shape="rect" coords="426,1,500,30" href="../contact.html">
</map>
<img src="/Images/navbar.gif" width="500" height="30" border="0" usemap="#Map"></a>
</td>
<td width="150" height="30">&nbsp;</td>
</tr>
<tr>
<td width="150" height="321">&nbsp;</td>
<td width="500" align="left" valign="top" bgcolor="#FFFF99" class="scroll">
<!-- TemplateBeginEditable name="Body" --><!-- TemplateEndEditable --></td>
<td width="150">&nbsp;</td>
</tr>
<tr>
<td width="150" height="19">&nbsp;</td>
<td width="500" align="center" valign="top"><font color="#FFFF99" size="1"><a href="http://www.helenpurves.co.uk">Copyright
HNEP 2006</a> - <a href="/about.html">About</a> - <a href="/contact.html">Contact</a></font></td>
<td width="150">&nbsp;</td>
</tr>
<tr>
<td width="150" height="67">&nbsp;</td>
<td width="500">&nbsp;</td>
<td width="150">&nbsp;</td>
</tr>
</table>
</body>
</html>

VIPStephan
Nov 26th, 2006, 02:39 PM
Put a div in that cell and change the CSS to something like this:


.scroll div {
height: ???px; /* apply value of your desire */
overflow: auto; /* gives us only a vertical scrollbar instead of vert. and hor. with overflow: scroll; */
}


The content of the cell will go inside that div. The scrollbar is only shown if content length exceeds height of div.

ella_tall
Nov 26th, 2006, 05:11 PM
Thanks. I've tried it - but almost certainly got it completely wrong. I don't know how. Shows how little I know about CSS. I assumed the div height in the CSS was the ideal length - however, the text is still expanding the cell. Argh argh help. Probably I got the div tag wrong or something.

Here's my shoddy code, with a free potted history of morris dancing in Alford, Lincolnshire. It's from a slave page, not the template.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META name="keywords" content="morris, alford, morris men, bells, world famous alford morris, alford windmill, folk dancing, lincolnshire">
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
.scroll div {
height: 300px;
overflow: auto;
}
-->
</style>
</head>

<body bgcolor="#FFFFCC" text="#000000" link="#000000" vlink="#000000" alink="#000000">
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="800" height="634" border="0" align="center" cellpadding="0" cellspacing="0" background="/backgroundsmall.png">
<tr>
<td width="150" height="117">&nbsp;</td>
<td width="500">&nbsp;</td>
<td width="150">&nbsp;</td>
</tr>
<tr>
<td width="150" height="80">&nbsp;</td>
<td width="500" align="center" valign="middle">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="500" height="80">
<param name="movie" value="/Images/30yrsbanner.fla">
<param name="quality" value="high">
<embed src="/Images/30yrsbanner.fla" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="80"></embed></object></td>
<td width="150">&nbsp;</td>
</tr>
<tr>
<td width="150" height="30">&nbsp;</td>
<td width="500" height="30" align="center" valign="middle"> <a href="/index.html">
<map name="Map">
<area shape="rect" coords="0,1,59,30" href="index.html">
<area shape="rect" coords="60,1,116,30" href="about.html">
<area shape="rect" coords="115,1,184,30" href="history.html">
<area shape="rect" coords="184,1,247,30" href="events.html">
<area shape="rect" coords="245,1,311,30" href="photos.htm">
<area shape="rect" coords="309,1,377,30" href="people.html">
<area shape="rect" coords="378,1,427,30" href="links.html">
<area shape="rect" coords="426,1,500,30" href="contact.html">
</map>
<img src="/Images/navbar.gif" width="500" height="30" border="0" usemap="#Map"></a>
</td>
<td width="150" height="30">&nbsp;</td>
</tr>
<tr>
<td width="150" height="321">&nbsp;</td>
<td width="500" height="300" align="left" valign="top" bgcolor="#FFFF99" class="scroll">
<div> <!-- InstanceBeginEditable name="Body" -->
<p>Alford Morris started as
Alford Morris Men on 11th October 1977, when three members of Grimsby
Morris Men who lived in Alford decided to branch out and start a Side
of their own. </P>
<p>Now Alford is a proud member of Open Morris, and 30 years on has awarded
itself the soubriquet of "The World Famous Alford Morris", which is
possibly a misread for Wold Famous as we trade primarily on the southern
slopes of the Lincolnshire Wolds.</p>
<p>We are particularly proud to be a non-discriminatory Side, encouraging
membership across an inclusive range of genders (six at the last count)
races (including Goodwood and Silverstone) and ages. Lack of ability,
mobility or musical talent is no bar.</p>
<p>We meet at Alford's busy Half Moon Inn on West Street to practise
every Sunday night throughout the year at about 8:30pm, and we dance
Cotswold and a bit of Border. We used to do Mumming and Longsword a
bit, and may again - if you are thinking of joining please ring
the Bagman or Squire. Details can be found on the contact page via the
menu above.<br>
</p>
<!-- InstanceEndEditable --></div></td>
<td width="150">&nbsp;</td>
</tr>
<tr>
<td width="150" height="19">&nbsp;</td>
<td width="500" align="center" valign="top"><font color="#FFFF99" size="1"><a href="http://www.helenpurves.co.uk">Copyright
HNEP 2006</a> - <a href="/about.html">About</a> - <a href="/contact.html">Contact</a></font></td>
<td width="150">&nbsp;</td>
</tr>
<tr>
<td width="150" height="67">&nbsp;</td>
<td width="500">&nbsp;</td>
<td width="150">&nbsp;</td>
</tr>
</table>
</body>
<!-- InstanceEnd --></html>

VIPStephan
Nov 26th, 2006, 08:25 PM
I don't see anything expanding the cell (Firefox 2). I get the scrollbar alright and everything behaves as it should. What browser are you using? If you are using IE then you should look for the proper (full) doctype (i.e. with URL):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


Otherwise maybe you can show a screenshot for better illustration?

I also noticed that in the table cell before that main cell you have a height of 321 pixels which of course will stretch the cells of the entire row to 321 pixels too.

ella_tall
Nov 26th, 2006, 11:04 PM
Oh, thanks, that's great. It seems to be rendering really differently in Dreamweaver, compared to the end product in IE. Ta muchly, that's excellent.

VIPStephan
Nov 26th, 2006, 11:40 PM
NEVER trust the design mode/preview of Dreamweaver (or any other WYSIWYG editor), it's not a browser. Always test your pages with real browsers and most importantly standards compliant browsers (which IE 6 is not) at first and then fix the errors IE is making.