• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Table nested inside a div

 
Sol Mayer-Orn
Ranch Hand
Posts: 311
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
only way to get the table to scroll is to have a fixed height on the table.

Eric
 
Gregg Bolinger
GenRocket Founder
Ranch Hand
Posts: 15302
6
Chrome IntelliJ IDE Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Sol Mayer-Orn
Ranch Hand
Posts: 311
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15302
6
Chrome IntelliJ IDE Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 311
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 387
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
hi Sol,

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

Herman

 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic