100% tbl height w/ fixed tr's

**rayray1** · 04-14-2008, 10:29 PM

I am trying to create a 3-row-table with HEIGHT 100%, where row 1 and 3 should have a FIXED height (25px) !!, and row 2 a VARIABEL height, taking THE REMAINING x% of the page.

It works fine in Firefox. But unfortunately it does NOT work in IE.

WHY?????

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
<html style="height:100%" xmlns="http://www.w3.org/TR/xhtml1">
<head>
<title>layout</title>
</head>
<body style="height:100%">
<table style="width:100%;height:100%; table-layout: fixed;">
<tr style="height: 20px; ">
<td>
Top (This row is supposed to be of FIXED 25px height)
</td>
</tr>
<tr>
<td style="background-color: blue;">
Middle (This row is supposed to fill the ramining x% of the page!)
</td>
</tr>
<tr style="height: 20px; background-color:red;">
<td>
Top (This row is supposed to be of FIXED 25px height)
</td>
</tr>
</table>
</body>
</html>

**boogyman** · 04-15-2008, 07:45 PM

Originally Posted by boogyman

for future reference, when you are posting computer code please use [code][/code] tags as referenced in #8 of our Posting Policies and Regulations. there is a set format for this type of writing that makes it easier for those whom browse and try to help out can read easier. Thanks

try using a HTML 4.01 Strict. The transitional DOCTYPE was developed for when CSS was being introduced nearly over a decade ago. also, IE does not support XHTML therefore you are parsing the page as invalid HTML. two factors that could be the reason why your page isnt displaying properly.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     <title>layout</title>
</head>
<body>

<table style="width:100%;height:100%; table-layout: fixed;">
     <tr style="height: 20px; ">
          <td>
               Top (This row is supposed to be of FIXED 25px height)
          </td>
     </tr>
     <tr>
          <td style="background-color: blue;">
               Middle (This row is supposed to fill the ramining x% of the page!)
          </td>
     </tr>
     <tr style="height: 20px; background-color:red;">
          <td>
               Top (This row is supposed to be of FIXED 25px height)
          </td>
     </tr>
</table>
</body>
</html>

**emanuelle** · 04-17-2008, 09:16 AM

Hi

I have the same height problem
Writting it with the strict doctype does not make my table height 100%
Any other suggestions?

Thread: 100% tbl height w/ fixed tr's

Thread Tools

Search Thread

100% tbl height w/ fixed tr's

Bookmarks

Bookmarks

Posting Permissions