CODEWITHSUNDEEP
htmlcss
Baffled by ASP.NET
Baffled by ASP.NET

Reputation: 559

Can I create a HTML table width a percentage height but pixel accurate row heights?

I need to create a table on a web page that has two rows. The table needs to fill the entire page so I have set the height and width of the table to 100% in the CSS stylesheet and the height of the HTML and body to 100% too.

However, I need to top row of the table to be exactly 100 pixels in height and the second row to expand to fit the remainder of the table. When I set the height of the top row, it doesn't work.

Is this behavior possible? I tried the following but it doesn't work.

<table style="border-collapse:collapse;height:100%;width:100%;">
  <tr>
    <td style="border:solid 1px black;height:100px">1</td>
    <td style="border:solid 1px black">2</td>
  </tr>
  <tr>
    <td style="border:solid 1px black">3</td>
    <td style="border:solid 1px black">4</td>
  </tr>
</table>

Edit: I am using tabular data and specifically want to use a table, not divs. The sample above is to simplify a table with around 20 columns.

Edit 2: I have found the issue. It is the doctype definition in the HTML (added by Visual Studio). After removing...

...it works perfectly. So my new question is, is this OK to do or is there a correct way to do it with the DOCTYPE?

Upvotes: 3

Views: 34364

Answers (8)

cletus
cletus

Reputation: 625037

Ok in light of new information (namely the tabular data), here is a solution:

<html>
<head>
<style type="text/css">
    #wrap { position: absolute; height: 100%; top: 0; right: 0; bottom: 0; left: 0; }
    table { width: 100%; height: 100%; }
    tr { margin: 0; }
    td { text-align: center; font-size: 80px; font-weight: bold; color: white; }
    #top { height: 100px; }
    #bottom { height: 100%; }
    #topleft { background-color: red; border: 3px solid black; }
    #topright { background-color: green; border: 3px solid yellow; }
    #bottomleft { background-color: yellow; border: 3px solid green; }
    #bottomright { background-color: blue; border: 3px solid red; }
</style>
</head>
<body>
<div id="wrap"> 
    <table>
    <tr id="top">
        <td id="topleft">1</td>
        <td id="topright">2</td>
    </tr>
    <tr id="bottom">
        <td id="bottomleft">3</td>
        <td id="bottomright">4</td>
    </tr>
  </table>
</div>  
</body>
</html>

I'll keep the one below for completeness if you want a non-tabular solution. There's no reason it can't be extended to a 2x2 grid either by use of floats or positioning:

<html>
<head>
  <style type="text/css" media="screen">
    #wrap {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
    }

    #top {
      width: 100%;
      height: 100px;
      position: relative;
      top: 0;
      background-color: #CCC;
    }

    #bottom {
      position: relative;
      height: 100%;
      bottom: 0;
      width: 100%;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div id="wrap">
    <div id="top">Top</div>
    <div id="bottom">Bottom</div>
  </div>
  </body>
</html>

Upvotes: 2

elbicho
elbicho

Reputation: 365

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css" media="screen">
        html, body {
            height:100%;
            margin:0;
        }
        table {
            background-color:#ccc;
            width:100%;
            height:100%;
        }
        th {
            height:100px;
            background-color:#fcfcfc;
        }
    </style>

    <title>TableTest</title>

</head>

<body>

<table>
    <tr>
        <th>Header1</th>
        <th>Header2</th>
    </tr>
    <tr>
        <td>Data1</td>
        <td>Data2</td>
    </tr>
</table>

</body>
</html>

This is what I believe a more semantic approach without using the id of class attributes in the table tags, taking advantage of the <th> tag to make the difference between both rows. This code doesn't work as intended in IE6/7, it might work in IE8, I tested it and works correctly in Firefox 3, Safari 3.1.2, Opera 9.50 and Camino 1.6.6.

Upvotes: 2

annakata
annakata

Reputation: 75794

Well, there's me thinking I know how to do this, so I run out the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <style type="text/css">
    html, body 
    {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    table 
    {
        height: 100%;
        width: 100%;
        background-color: blue;
        border-collapse:collapse;
    }
    tr#fixed
    {
        background: silver; 
        height: 100px;
    }
    tr#expand
    {
        background: gray;
    }
    td 
    {
        text-align: center;
    }
    </style>
</head>
<body>
    <table>
        <tbody>
            <tr id="fixed">
                <td>100</td>
            </tr>
            <tr id="expand">
                <td>*</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

(note, strict + CSS)

And I find that although this works in Firefox, Chrome and anything !IE I like, IE has some very unusual behaviour here. Long story short IE is disregarding the pixel dimensions and instead compares relative heights! It misreports this in the IE dev toolbar, but you can clearly see it if you add and change a height on tr#expand

If you set a height of 100px, you'll find both tr's actually render at 50%. At 200px, you'll get a 33/66 split, at 50px you'll get a 66/33 split! This seems to be true for other units like em, and I suspect it might be related to content since it has edge behaviour at low units like 5px. As far as I can see IE is outright broken here. This is not a bug I have seen before, nor one I've been able to google. Until a workaround suggests itself, it seems to me that you're SOL for a strict solution.

Upvotes: 2

J__
J__

Reputation: 3837

OK working with CSS.

HTML:

<html>
  <head>
    <link href="table.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <table>
      <tr class="fixed">
        <td>This is item text.</td>
      </tr>

      <tr>
        <td>This is item text 2.</td>
      </tr>
    </table>

  </body>
</html>

CSS:

table
{
 border: 1px solid black;
 height: 100%;
 width: 100%;
}

tr.fixed
{
 border: 1px solid black;
 height: 100px;
}

td
{
 border: 1px solid black;
}

Upvotes: 4

Rutesh Makhijani
Rutesh Makhijani

Reputation: 17225

You have given height only in one column of first row. Try to give height in both the columns or at the row level

Upvotes: 1

Rutesh Makhijani
Rutesh Makhijani

Reputation: 17225

Tried the following code in IE7, Mozilla 2, Chrome 1, Opera 9.5, Safari 3.2 and it works

<html>
<head>

</head>
 <body>
  <table height="100%" border="1">
<tr height="100px"><td>Some</td></tr>
<tr><td>Other</td></tr>
 </table>
 </body>
</html>

Upvotes: 0

J__
J__

Reputation: 3837

Without CSS this works:

<html>
  <body>
    <table height="100%" width="100%" border="1">
      <tr height="100">
        <td>This is item text.</td>
      </tr>

      <tr>
        <td>This is item text 2.</td>
      </tr>
    </table>
  </body>
</html>

So it is possible, I'll try it now with CSS.

Upvotes: 6

Toon Krijthe
Toon Krijthe

Reputation: 53366

Yes, you can combine all measurements. Just try it out in different browsers.

Upvotes: 0

Related Questions