Scroll liquid table cell in Moz and FF

liunx · Jan 11, 2008

I'm trying to get a single table cell to be scrollable in Mozilla and Firefox using CSS. I know this can be done by placing a DIV into the <td>. In IE this will even work when the td-height is set to a percentage, but in Moz and FF this needs to be a set height. Is there a method to work around this set height and create a liquid height? It should work in ALL browsers!
.scrollable {height:100%; overflow:auto;}
Now please don't start about not using tables for web layout. I know all about that and totally agree. But here is a case where there is no other option.

cheers, Jochem

Hmm... I figured that as soon as I put in a DOCTYPE, it won't even work in IE anymore. This shouldn't be too hard to solve, or is it...? Here's the full code:

cheers, Jochem

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

<style type="text/css">
html , body {
padding: 0;
height: 100%;
}
table {
width: 750px;
height: 98%;
border: 2px solid #000;
}
td {
border: 1px solid #f00;
vertical-align: top;
text-align: justify;
font: 10pt Verdana, Arial, Helvetica, sans-serif;
}
caption {
text-align: left;
font: 8pt Verdana, Arial, Helvetica, sans-serif;
}
.scrollable {
height: 100%;
overflow: auto;
}
</style>

</head><body>

<table align="center">
<caption align="bottom">caption text</caption>
<tr><td height="100">text goes here</td>
<td>text goes here</td></tr>
<tr><td>text goes here</td>
<td><div class="scrollable">
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text 
extra text extra text extra text extra text
</div></td></tr>
</table>

</body></html>mmm... I'm not an expert, but I would say, as long as you don't specify a height for your td element ( the one that's supposed to be scrollable ), the browser will consider it as as high as the content is. It will just scroll the page vertically.
Now, if you give the td a fixed height and the div a height of 100%, you'll get the desired effect ( if I understood well what you wanted... )
Sorry if I was pointing something obvious you had already tried...
I know you want liquid height, but I really don't know if it's possible to work around that...
And now, i realise my answer is not really helping, but... hey, it will prevent other users from writing the same thing...

I have found a pure CSS solution. It's not pixel perfect design-wise, but I now have a border, a static header and menu, a footer and a scrollable liquid text div. It works with all screen resolutions and in all browsers. I would very much like to get your response.

cheers, Jochem

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

<style type="text/css">
html, body {padding:0; height:100%;}
#CONTAINER, #HEAD, #FOOTER, #MENU, #TEXT {position:absolute;}
#CONTAINER{z-index:1; width:750px; height:100%; top:0px; margin-left:-375px; left:50%;}
#HEAD{z-index:4; width:730px; height:100px; top:10px; border:2px solid #f00;}
#FOOTER{z-index:3; width:750px; height:100px; top:96%;}
#MENU{z-index:3; width:90px; height:93%; top:10px; border:2px solid #00f;}
#TEXT{z-index:2; width:650px; height:93%; top:10px; border:2px solid #000; padding-left:100px; overflow:auto;}
</style>

</head><body>

<div id="CONTAINER">
<div id="HEAD">head</div>
<div id="FOOTER">footer</div>
<div id="MENU"> menu</div>
<div id="TEXT"> 
text text text text text text text text text text 
text text text text text text text text text text 
text text text text text text text text text text 
text text text text text text text text text text 
text text text text text text text text text text 
text text text text text text text text text text
</div>
</div>

</body></html>I think you did the right thing by turning to css.... congratulations !!!!
( i was also wondering why you weren't doing it with css, but you said it was not possible... )

Scroll liquid table cell in Moz and FF

liunx

Guest