Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fix height of a table row in HTML Table

Tags:

html

Kindly look at the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
</head>
<body>
<table id="content" height="525" border="0" cellspacing="0" cellpadding="0">
<tr style="height:9px"><td height="9" bgcolor="#990000">Upper</td></tr>
<tr><td  bgcolor="#990099">Lower</td></tr>
</table>
</body>
</html>

IE ignores the "height:9px" and I can't get what I want. Also, without the DOCTYPE, it works. But I have to follow the standard so that DOCTYPE cannot be removed. Does anyone how to fix the height of the upper row?

Some clarifications: 1. The height of second row may vary according to users' action and cannot be fixed. 2. The height of the table is set to 525px so the table has a minimum height of 525px

like image 825
Billy Avatar asked Feb 27 '09 07:02

Billy


2 Answers

the bottom cell will grow as you enter more text ... setting the table width will help too

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
</head>
<body>
<table id="content" style="min-height:525px; height:525px; width:100%; border:0px; margin:0; padding:0; border-collapse:collapse;">
<tr><td style="height:10px; background-color:#900;">Upper</td></tr>
<tr><td style="min-height:515px; height:515px; background-color:#909;">lower<br/>
</td></tr>
</table>
</body>
</html>
like image 169
roman m Avatar answered Oct 18 '22 07:10

roman m


my css

TR.gray-t {background:#949494;}
h3{
    padding-top:3px;
    font:bold 12px/2px Arial;
}

my html

<TR class='gray-t'>
<TD colspan='3'><h3>KAJANG</h3>

I decrease the 2nd size in font.

padding-top is used to fix the size in IE7.

like image 28
shery Avatar answered Oct 18 '22 05:10

shery