tags:

views:

2851

answers:

10
+1  Q: 

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

I need to create a table in 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 behaviour 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?

A: 

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

Gamecat  2009-01-30 11:23:34
+4  A: 

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.

_J_  2009-01-30 11:26:06
This doesn't work for me. The top row gets really big and the bottom one small. They both change size as the page size changes.
Baffled by ASP.NET  2009-01-30 11:36:37
Strange how all the suggestions being sent in work for the submitter but for you they appear to work in reverse? What browser are you using?
_J_  2009-01-30 11:44:47
IE7. I think it is an Infragistics problem - the div is inside an Infragistics websplitter. I have asked tham for help but that could take days.
Baffled by ASP.NET  2009-01-30 12:21:35
I now realise it is an issue with the DOCTYPE I had set but I am not sure if removing the DOCTYPE is sensible or if there is an alternative.
Baffled by ASP.NET  2009-02-02 11:50:25
Sounds like a new question to me (cos I don't know the answer!)
_J_  2009-02-02 16:53:28
A: 

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>
Rutesh Makhijani  2009-01-30 11:28:20
It doesn't. The top cell is really big and the bottom one really small unless I take the 100% off the html and body styles, when the table gets small. I need the entire table to fill the page.
Baffled by ASP.NET  2009-01-30 11:35:02
This solution works for me, just as my solution also works. IE6.
_J_  2009-01-30 11:46:22
Sorry, my mistake. It does work on its own but I am putting it in an Infragistics web splitter panel and that seems to kill it :-(I am getting fed up of Infragistics web controls. The sizing on almost all of them is seriously annoying...
Baffled by ASP.NET  2009-01-30 12:09:16
Can you not design the page without it?
_J_  2009-01-30 12:28:23
Unfortunately not. The page is shown in two sections and the splitter allows you to resize both.
Baffled by ASP.NET  2009-01-30 12:39:12
I now realise it is an issue with the DOCTYPE I had set but I am not sure if removing the DOCTYPE is sensible or if there is an alternative.
Baffled by ASP.NET  2009-02-02 11:52:38
height="100px" - don't use 'px' in HTML, it's a CSS-only unit.
bobince  2009-02-02 12:22:40
+1  A: 

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>
cletus  2009-01-30 11:29:49
I am using tabular data.
Baffled by ASP.NET  2009-01-30 11:38:25
...and when I try this, the bottom div doesn't seem to expand to fill the page (IE7)
Baffled by ASP.NET  2009-01-30 11:56:25
I now realise it is an issue with the DOCTYPE I had set but I am not sure if removing the DOCTYPE is sensible or if there is an alternative.
Baffled by ASP.NET  2009-02-02 11:51:13
You might want to consult this: http://hsivonen.iki.fi/doctype/
cletus  2009-02-02 11:54:14
+1  A: 

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

Rutesh Makhijani  2009-01-30 11:29:54
The height thing was a typo.How can I give a size to the second row? I want it to expand to fit.
Baffled by ASP.NET  2009-01-30 11:35:53
+3  A: 

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;
}
_J_  2009-01-30 11:34:27
That works. Do you know why my html at the top doesn't? I can't spot the difference.
Baffled by ASP.NET  2009-01-30 11:44:46
I'm fixing the height of the table row <tr> in my CSS, you're fixing the height of the data row <td>
_J_  2009-01-30 11:47:45
Strangely, when I put your code in place it stops working. This is when I add it within a div that is sized to 100% height and width, and the div is inside an Infragistics WebSplitter pane.
Baffled by ASP.NET  2009-01-30 11:49:59
Obviously the div or the splitter pane are overriding some of the settings.
_J_  2009-01-30 11:53:28
this only works for a quirksmode/transitional doc
annakata  2009-01-30 12:16:24
I guess so. I haven't a clue how to fix it though. I thought if the styles were set directly against the html that they couldn't be overridden in that way.
Baffled by ASP.NET  2009-01-30 12:20:46
it's unlikely they are - inline styles do have a very high specificity
annakata  2009-01-30 13:14:21
Is my answer correct then, at least for the purposes of the initial question?
_J_  2009-01-30 16:50:53
+2  A: 

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"&gt;
<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.

annakata  2009-01-30 12:14:34
A: 

it don't work in mozilla 3

 2009-01-30 14:19:10
A:  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

<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.

elbicho  2009-01-30 17:17:05
without seeing the data you can't be sure th is more semantic, but in principle it's a good point (and a shortcut)
annakata  2009-01-30 17:27:13
A: 

Cletus' answer above works for my table, in non-quirks mode, I'd just like to clarify - does it work thanks to the #wrap element having defined the dimensions that the included table then stretches to the 100% of? It seems that its existence is the only difference from just defining a 100%-height table and a 100%-height row in it (which only works in quirks mode).

Please confirm, as I'd like to understand the solution before implementing it in our product. Thank you!

NPC  2010-06-09 12:32:52

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?