This week's book giveaway is in the Servlets forum.
We're giving away four copies of Murach's Java Servlets and JSP and have Joel Murach on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes Table nested inside a div Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Murach's Java Servlets and JSP this week in the Servlets forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Table nested inside a div" Watch "Table nested inside a div" New topic
Author

Table nested inside a div

Sol Mayer-Orn
Ranch Hand

Joined: Nov 13, 2002
Posts: 311
Hi,

I've been wracking my brain about the following problem.
Would anyone please have insights on it?

1. I'm writing for Firefox only.
2. I have a <DIV> with some fixed width and height.
3. Inside it, I'm nesting a large <TABLE> with scrollable TBODY.

Now, i'd like the table to fit exactly into the external DIV (namely, occupy 100% of the DIV area, in both width and height).
Unfortunately, I can't get it to work... it produces a weird effect: the table becomes larger than its containing DIV, brimming over the border of the div.

My problematic code:



Could anyone please tell why this table outgrows its wrapping div?

Please note :
1. Obviously I could just set the TBODY height (in pixels)...
but I'm trying to avoid it. I'm looking for a generic way to tell *any* table: "strech to fill your wrapping div", without putting any pixel-specifics into the table itself.

2. Note I set both the 'TBODY' and 'TABLE' to have 'height=100%'.
It either of them is missing a height, then the table becomes even larger.

Thanks
[ March 29, 2007: Message edited by: Sol Mam-Orn ]
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
only way to get the table to scroll is to have a fixed height on the table.

Eric
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

Originally posted by Eric Pascarello:
only way to get the table to scroll is to have a fixed height on the table.

Eric


I'm not sure that is the problem. He wants the TBODY to scroll, thus leaving the THEAD in tact. But then he wants the entire table in a DIV which is causing the problem. I'm more curious as to why the table needs to be in a DIV in the first place if the table fills the entire width and height of the DIV anyway. Just lose the DIV all together.


GenRocket - Experts at Building Test Data
Sol Mayer-Orn
Ranch Hand

Joined: Nov 13, 2002
Posts: 311
Originally posted by Eric Pascarello:
only way to get the table to scroll is to have a fixed height on the table.

Eric


Thanks for the reply.
However, I have no complaints about the TBODY scrolling. The problem is that the table stretches, becoming larger than its containing div.
(The problem can be reproduced without TBODY scrolling, but it won't make much sence - if you fit a big table into a small div, and you don't scroll, then some data will just disappear).

Here's how it looks:

And link to a live demo: tableDiv

Let me just emphasize that I'm trying to fit the table into the div (red area).
And I'm trying to avoid setting a fixed height to the TBODY - i'd like it to follow the size of the div, if possible.

Thanks again
[ March 29, 2007: Message edited by: Sol Mam-Orn ]
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

And I'll say again, why do you need the containing DIV if the table simply fills the DIV? Lose the DIV.
Sol Mayer-Orn
Ranch Hand

Joined: Nov 13, 2002
Posts: 311
Originally posted by Gregg Bolinger:
And I'll say again, why do you need the containing DIV if the table simply fills the DIV? Lose the DIV.


Thanks for having a look at this question.
When programmers do strange illogical stuff, it's either because they've finally "lost it", or because they're limited by some atrocious old code/framework...
I'm maintaining an old application, which has tons of CSS definitions with explicit reference to 'div'. They also have some javascripts that dynamically adjust styling properties of DIVs (again, with explicit references such as getElementsByTagName('div')).
I'd like to touch as little as possible, just put my table into the div, and allow the horrid infrastructure to do whatever it wants with the DIV...

thanks again
[ March 29, 2007: Message edited by: Sol Mam-Orn ]
Herman Schelti
Ranch Hand

Joined: Jul 17, 2006
Posts: 387
hi Sol,

maybe you can split the table into 2 tables, and set the width for the columns.

Herman

 
It is sorta covered in the JavaRanch Style Guide.
 
subject: Table nested inside a div
 
Similar Threads
Table scrolling problems
how to position div over table
HTML does not print properly - table width exceeding 100%?
Display Tag css issues in IE and FF
Dynamic table generation in jsp