Can someone tell me how to add a scrollbar to....

Sickopuppie · June 13th, 2006, 04:17 PM

...a single cell? I have a table of two cells side by side and I just need a scrollbar for one of them. Is there any way I could do this?

Sickopuppie

richard.york · June 13th, 2006, 05:31 PM

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

Code:

<table>
    <tbody>
        <tr>
            <td><div class='scroll'>place scrolling content here.</div></td>
            <td>This content won't scroll.</td>
        </tr>
    </tbody>
</table>

Of course, whether or not you see scrollbars depends on the restraints you place on the table. You'll also want to force the table to honor the dimensions you place on it.

table {
    table-layout: fixed;
}
td {
    overflow: hidden;
    width: 50px;
    height: 50px;
}

I put the width and height of 50 pixels on there to illustrate that the table honors the pxplicit width and height when the table-layout:fixed; declaration is present.

HTH!

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

Sickopuppie · June 13th, 2006, 05:45 PM

Thanks for the reply, but I am still not clear on how I place restraints on my table size, I am using Dreamweaver and I think my code might be off:

<body>
<br />
<table width="750" height="300" border="1" align="center" table-layout: fixed>
  <tr>
    <td width="200" height="300" align="left" valign="top"><p><img src="img.gif" alt="" width="200" height="300" /><br />
    </td>
    <td overflow: hidden; width: 550px; height: 300px; align="left" valign="top"><div class='scroll'>
         </div></td>
  </tr>
</table>
</body>

Sickopuppie

richard.york · June 13th, 2006, 06:05 PM

The code I provided to you is CSS, and goes between <head> and </head> in a <style> element. CSS is used to separate presentation from data. Much of the presentational HTML that you've used can be expressed in CSS, which would make your documents easier to maintain and overall faster performing.

Code:

<html>
    <head>
         <style type='text/css'>

table.mytable {
    table-layout: fixed;
    width: 750px;
    height: 300px;
}
table.mytable td {
    overflow: hidden;
    width: 550px;
    height: 300px;
    text-align: left;
    vertical-align: top;
}
div.scroll {
    width: 100%;
    height: 100%;
    overflow: auto;
}
         </style>
    </head>
    <body>
    </body>
</html>

In order for that to not affect your other tables you may want to give your table a class name, and then reference that table from the style sheet in the same way that you did the <div>, in other words...

<table class='mytable'>

...is referenced from the style sheet as...

table.mytable {
table-layout: fixed;
}

If you have questions about Dreamweaver specifically, please ask those in the Dreamweaver forum, where I moved your last thread, as our resident Dreamweaver experts are more likely to help you there than here.

HTH!

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

Dj Kat · June 15th, 2006, 09:47 AM

There is a alternative.
You can also but an Ilayer inside the table cell

try this:

Code:

<table>
  <td></td>
  <td>
    <ilayer></ilayer>
  </td>
</table>

__________________________________________________ ________
This is my junk I'm gona eat it

meow · June 15th, 2006, 02:45 PM

Do you mean IFRAME? Because ILAYER is only supported by Netscape 4.

--
http://yupapa.com

Dj Kat · June 15th, 2006, 03:04 PM

ilayer is supported bij ie en firefox aswell.

It's the same as an Iframe only that the source can be placed inside the ilayer tags and not an external page.

__________________________________________________ ________
This is my junk I'm gona eat it

meow · June 15th, 2006, 03:22 PM

If you can make ILAYER or LAYER "work" in IE you must be using black magic. :)

Both are old tags that tried to do the same thing that we can do with any element today with the help of CSS. Position and stack boxes. I'm sorry, but those tags really died with Netscape 4. If they seem to work for you, you must have wrapped them in a DIV or something and styled that DIV, i.e. the ILAYER or LAYER isn't really used at all.

--
http://yupapa.com