Click to See Complete Forum and Search --> : scrolling table cell in PHP?


jwlms
06-23-2004, 09:33 AM
Hi everyone,

I'm very new to PHP and I have been designing a page that consists of a table on the main index page that calls an include to place the content into a cell in the middle of the page. Problem is, the text for that cell is too long. Is there a way to make the table cell scroll? I've searched for info on scrolling table cells and everything I've found doesn't work in all browsers.

Thanks in advance,
Jessica

shimon
06-23-2004, 09:47 AM
Hi Jessica - welcome to the forum!

Now then...the good news is there's a solution, though it doesn't require PHP - you need to do it in HTML and CSS. You'll need a scrolling <div> element in there.

So

<table>
<tr>
<td><div class="scroll">Your text here, which may be quite long</div></td>
</tr>
</table>Now that's quite simplified but you get the idea.

Then you need to set up a CSS rule for that 'scroll' class, it might look like:

.scroll{
width:200px;
height:200px;
overflow:auto;
}

that should do it :)

jwlms
06-23-2004, 11:00 AM
Thanks for the example --

does the div tag work in all browsers (4.0 and higher, I mean)?

Also, since I don't know a lot about CSS, do I put the class part of the code you gave me into the head tags?

Thanks!
Jessica

shimon
06-24-2004, 04:18 AM
Good questions...

The scrolling <div> most likely won't work in _all_ browsers (I'm guessing an antique piece of junk like Netscape 4 will have a problem with it) but as far as I know it works fine with all modern standards-compliant browsers. I've used it with Opera7 and Mozilla on Linux, and I'm reliably informed it works fine with IE 5 and 6. So I would personally classifiy it as 'safe to use' :)

As for where you place that rule, yes you can place it in the head:

<html>
<head>
<!-- other stuff e.g. page title -->
<style type="text/css" media="screen">
<!--

.scroll{
width:200px;
height:200px;
overflow:auto;
}

-->
</style>
</head>
<body>

<table>
<tr>
<td><div class="scroll">Your text here, which may be quite long</div></td>
</tr>
</table>

<!-- rest of page -->


Though, I tend to think it's a little neater to keep it in an external stylesheet file. Just place the code in a file, call it something.css and call it in like so:

<head>
<!-- other stuff -->
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
</head>

and let me know how you get on :)


[Edit] I've just visited your website by the way, it's very nice :) You sure know a lot about babies!