1

I have a table with 100% of height. This table has 3 rows. The first and the third rows with 100 pixels of height. So, fixed height rows. Inside of the second row, another table. And I'd like this table to be also 100% of height, calculating automatically the space of the height. Yes, in my CSS, the HTML and BODY has height: 100%, margin: 0px and padding: 0px. Like this:

<table border=0 cellpadding=0 cellspacing=0 width=100% style="height: 100%;">
<tr>
<td height=100>Header</td>
</tr>
<tr>
<td style="height: 100%;">
<table border=01 cellpadding=0 cellspacing=0 width=90% style="height: auto;">
<tr>
<td style="height: 50px;">Inside 1</td>
</tr>
<tr>
<td style="height: 100%;">Inside 2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height=100>Footer</td>
</tr>
</table>

In IE and Chrome the heights are totally wrong... How can I resolve this?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Rodolpho Laurindo
  • 11
  • 2

2 Answers2

1

  1. Are these tables being used for tabular data, or for layout? Don't use tables for layout. See Why not use tables for layout in HTML?.

  2. This is not HTML5. HTML5 does not support cellpadding, cellspacing, border, width, or height attributes on these elements. You should be using CSS instead.

  3. Generally speaking, it's far easier for people to help troubleshoot these problems if you give them a jsFiddle or something similar.

  4. To actually solve your problem, set the height on the embedded table to 100%, not auto. jsFiddle. But seriously, #1-3 are more important than #4.

Community
  • 1
  • 1
newtron
  • 5,938
  • 1
  • 23
  • 19
  • 2. Yes, this is HTML5. I know that I can set a lot of attributes in CSS (like cellpadding, cellspacing etc), but I just need to get this issue of height working to see other things in HTML5 with new CSS3 features working also, like border-radius... – Rodolpho Laurindo Sep 29 '12 at 02:56
  • 4. If I put the embedded table with 100% height, the space is calculated wrong the same way... – Rodolpho Laurindo Sep 29 '12 at 02:57
  • Sorry, it's not *valid* HTML5. Run it through an HTML5 validator and you will see errors for each of those attributes. As for the height issue, did you look at the jsFiddle I posted? It looks to me like it's working there. Or is there a problem with that? – newtron Sep 29 '12 at 16:40
  • I know it is not a valid HTML5, but this is only to illustrate, ok?! I know also that TABLES are not very usual today, but the question is that I have a lot of old web systems and, of course, they are rich in tables... The users access the systems via IE. And now I have to introduce some CSS3 features in some cases, but when I do that without DOCTYPE, IE shows nothing, or with DOCTYPE, IE distorts the heights... – Rodolpho Laurindo Sep 29 '12 at 18:20
  • So, what option do I have?! I saw your post in jsFiddle, but look that the scrollbar is visible, so, it's wrong... My intention is to use height = 100% only to fit in the vertical space... Understand?! – Rodolpho Laurindo Sep 29 '12 at 18:24
  • It sounds like you're getting fairly angry, and I'm not sure why. I'm a stranger spending time to help you for free. Sorry if I'm reading your tone wrong. Your original post mentioned IE and Chrome. In the jsFiddle, using Chrome 22 on a Mac, I don't see scrollbars. I don't have IE available to check. It doesn't surprise me that combining invalid HTML5 with an HTML5 doctype (or combining HTML5 with another doctype) causes problems. Once you start deviating from standards, unexpected things can happen. If you want to include HTML5 and CSS3, you may have to rewrite the page so that it's valid. – newtron Sep 29 '12 at 21:44
  • Since I don't have IE right now, and I'm not seeing the problem in Chrome, I'm not sure I can offer further help. – newtron Sep 29 '12 at 21:44
  • Hey, newtron, I'm not angry... Sorry if my tone caused this impression... I know you are spending time and I appreciate that very much... I just woud like to understand what happens to IE... I mentioned Chrome and IE because some users access with Chrome, but 90% of the users access with IE, unfortunately... Please, now see this link [link](http://201.6.123.74/test.asp)[link] Now it's HTML5 valid! And still in IE the heights are cauculated very very wrong, but in Chrome, not. In Chrome it's ok, but in IE, it's ugly... Why??!?! Thank you very much, newtron! – Rodolpho Laurindo Sep 30 '12 at 18:46
0

You're assigning the 100% height for the inner table to a td element, instead of the table itself.

On line 6 above, remove the height declaration, and then on line 7 for your table, change "height: auto;" to "height: 100%;"

Mike
  • 1,559
  • 10
  • 17
  • If I put the embedded table with 100% height, the space is calculated wrong the same way... It works in Quirks mode, but in DOCTYPE HTML, not... That´s the major problem! – Rodolpho Laurindo Sep 29 '12 at 02:58