Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1490
  • Last Modified:

overflow: scroll in table cell


I want to make a table cell have scrolling content but it doesn't seem to work and I'm not sure why.  Is there a way to make this happen?  I've tried wrapping the content in a div inside the cell and applying the overflow attribute to the div but I end up with the same result.  The table just expands to show the entire content.  Here's the simplified code:

<table border="1" style="height: 300px;">
<tr>
<td style="overflow: scroll;">
    <!-- more than 300 px height worth of content here -->
</td>
</tr>
</table>

I try to use tableless design all of the time, but for my application at hand I need to use a table or else I'm going to have to write a lot of dHTML.
0
phasevar
Asked:
phasevar
  • 6
  • 5
  • 3
  • +1
2 Solutions
 
DaydreamsCommented:
Hi phasevar,

Try this:

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

div.myclass { height:300px; overflow:auto; }

</style>
</head>

<body>

<table border="1" cellpadding="0" cellspacing="0" width="100">
  <tr>
    <td>
    <div class="myclass">
This text will break at 100 pixels wide, and the content will be clipped at 300 pixels high.
This text will break at 100 pixels wide, and the content will be clipped at 300 pixels high.
This text will break at 100 pixels wide, and the content will be clipped at 300 pixels high.
    </div>
    </td>
  </tr>
</table>
</body>
</html>

0
 
phasevarAuthor Commented:
That works, but only because you set the div height.  My application is a user resizable table.  So if I set the div height then I have to manually recalculate the div height any time the table height changes.  Hopefully I can do that before it's rendered in order to make it appear fluid and smooth.  At the moment I'm undsure whether a table height reduction would be calculatable at all since the table may be unwilling to shink before the div and yet I can'y calculate the new div height before the table shrinks.
0
 
COBOLdinosaurCommented:
phasevar,

What you are asking for is not logical.  A div that is not given an explicit height, sizes to content.  Therefore there can never be overflow.  If an infinite about of content is added the div will size to infinity eventually fill the universe but there will still not be a scroll bar because there is no overflow until you define the boundary at which the div ends.

Cd&
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
phasevarAuthor Commented:
What is illogical about assigning the div's container (the table) a height and expecting the div to live within those constraints?  I explicitly told the table I wanted it to be 400px high and I explicitly told the div I wanted it to overflow with scrollbars any content that does not fit.  Obviously it doesn't work, but I don't see that as an illogical request.
0
 
COBOLdinosaurCommented:
Sorry, I assumed you had a more detailed understanding of the specifications and standards then you do.
 
The div element does not inherit height.  In fact it has no HTML height attribute under the standard.  To be valid the height must be explicitly specified using CSS.  In all other cases the height is derived from content.  To have it behave any other way would reduce its flexibility for layout management; which is its purpose.


You can wrap a hundred elements around it all with height defined, and it is still not going to give you scroll bars.  It is sized from the inside out, not from the outside in except in the case of explict CSS declarations.

So I repeat: There is no overflow without a boundary that defines the area being overflowed.

Cd&
0
 
phasevarAuthor Commented:
Ahhh, inheritance.  That's exactly what I need.  I can understand the inside-out model being appropriate for most all pages.  I just need a way to alter that model for times when inside-out is not appropriate.  And it looks like it's here in the form of a percentage specificed height value.

If I specify height:100% then a div should inherit the height of its container.  This works in IE quirks mode, but not in standards mode and not in FireFox.  Obviously the standards say that height:100% means something different than inherit the height of the parent node.  What could height:100% mean if not of the parent node?  What other purpose could it possibly serve?

The lack of a height inheritance seems like a major limitation for dHTML application development.  So am I missing something other than a big glob of javascript code to resize and reposition a bunch of divs when their container dragged and resized?

<table border="1" style="height:100px;width:150px;">
<tr>
<td>
    <div style="height:100%; overflow:scroll;">
        Long text that would normally overflow.
        Long text that would normally overflow.
        Long text that would normally overflow.
        Long text that would normally overflow.
        Long text that would normally overflow.
    </div>
</td>
</tr>
</table>
0
 
COBOLdinosaurCommented:
height 100% is not valid, because it is 100% of content, and that is already the default.  

>>>The lack of a height inheritance seems like a major limitation for dHTML application development.

Exactly the opposite.  The inside out model allows manipulation of small child nodes to drive re-rendering with much less code and much more efficiently . Very fine grained modifications are possible directly throught the properties and methods of the stylesheets object.

Based on the coding formats you are presenting and your pre-occupation with maintaining rigid control, I think when you say DHTML, your referring to the old 20th century 2-dimesional Microsoft-centric approach we were stuck with until we got browsers with high levels of support for CSS, DOM methods, DOM node collection, and stylesheets object.  

There is probably still a limited use for those old magazine page type presentations, but the rigidity necessary to make them work just is not relly appropriate for modern user controlled presentation and fluid bend but don't break sites.

I think the big problem you are having stems from only haveing two dimensions to work in;  been there; done that; didn't like the limitations.  Fortunately thechnology came along to take the handcuffs and let me work in all 4 dimensions.


Cd&
0
 
COBOLdinosaurCommented:
The real problem you have there is that you are trying to use tables to manage layout.  That is not what they are for.  It was all we had at one time, but they are just not well suited to handle the demands of layout for modern apps.

Cd&
0
 
phasevarAuthor Commented:
Cd, I know where you're coming from.  As I stated in my original question, most all of my development is tableless.  I create web sites day in and day out with nothing but divs and css for formatting.  I only use tables when necessary.  This happens to be one of those times when using a table would have significantly cut down on my work load.

What I'm building is not a web page.  It is a web based application that uses javascript interfaced with the DOM to create a user interface not too different from an OS "window".  This "window" is a floating block that can be dragged around the client area and resized just like a desktop window.  The contents of the window is dynamically created based on user input and server communications.

In my particular use for the "window", there is a need for a scrolling area because the content may (depending on how large or small the user has the area set) become larger than its container.

The application is not too different than a Yahoo! game.  The main difference is that Yahoo! Games use activeX and launch in a new OS window whereas my application launches in a floating block.

Of course, I can make positioned divs work with enough javascript code.   However, when resized dynamically, tables already function the way I need.   So by writing the necessary code in javascript I'm just reinventing the wheel.  That costs me time, extra bandwidth, and longer load times for my clients.

HTML's inside-out philosophy is great for most cases.  I'm disappointed that the standards bodies don't have enough forsight to make it flexible for those of us starting to build rich applications on the web.
0
 
COBOLdinosaurCommented:
There is no need for a lot of scripting.  

The div is being populated off of events... so there are already event handlers that can have a line or two of code added.

The container has a height set by the user or in code:

var xxx=userdefined;
when the div gets populated it assumes the size of the content and that value is in
document.getElementById('idofdiv').offsetHeight;

so if the div class already has an overflow:auto

the only code needed is:

HGT=Math.min(xxx,document.getElementById('idofdiv').offsetHeight);
document.getElementById('idofdiv')style.height=HGT+'px';

that satisfies the need for an explicit height dynamically at the time of the event.

Cd&
0
 
ftaco96Commented:
This works for me in IE. Don't know if it works in FireFox...

<html>
<head>
<style type="text/css">
    div.myclass {  overflow:auto; }
</style>
<script>
    function window_onload() {
        document.getElementById('myDIV').style.setExpression("height","(document.getElementById('myTD').clientHeight -10).toString() + 'px'");
    }
</script>
</head>

<body onload="window_onload();">

<table border="1" cellpadding="0" cellspacing="0" width=100% height=100% >
  <tr>
    <td id="myTD">
    <div id="myDIV" class="myclass">
This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text.
This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text.
This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text.
This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text.
This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text.
This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text.
This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text. This is a lot of text.
    </div>
    </td>
  </tr>
</table>
</body>
</html>

Be careful with this, though. Since the size of the div drives the size of the TD, if for some reason the size of the div becomes greater than the size of the table, the browser or your application could end up in an infinite loop of resizing the table to the size of the div and vice versa. This shouldn't ever happen, since the div is scrollable, but I can't predict everything.
0
 
phasevarAuthor Commented:
Thanks for the help and suggestions.  I was hoping there would be a simple css only solution, but I'll hack in some code to get the job done.
0
 
ftaco96Commented:
This might work:
div#myDIV
{
    overflow: scroll;
    height: expression("(document.getElementById('myTD').clientHeight -10).toString() + 'px'");
}
0
 
ftaco96Commented:
Actually, that should be :

height: expression((document.getElementById('myTD').clientHeight -10).toString() + 'px');
0
 
phasevarAuthor Commented:
That's a cool trick.  I wasn't aware of the expression() syntax.  Unfortunately it only works in IE.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 6
  • 5
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now