How create table which is 100% of the height of its container?

[RowanSB]

How do I create a table which 100% fills (width and height) the containing element (I'm thinking here of a cell in an outer table)? Here's some sample HTML:

<h1>Table Test 2</h1>
<table class='outer'>
 <tr>
 <td>
 <table class="inner" height="100%">
 <tr>
 <td>inner-table row 1 cell 1</td>
 <td>inner-table row 1 cell 2</td>
 </tr>
 </table>
 </td>
 <td height="200px">Second Cell which is 200px high</td>
 </tr>
 <tr>
 <td width="400px">Third Cell which is 400px wide</td>
 <td>Fourth Cell</td>
 </tr>
</table>

Here's the CSS:

table.outer {
 border-style: solid;
 border-width: 5px;
 border-color: red;
 border-spacing: 0px;
 border-collapse: separate;
 padding: 0px;
}

table.outer td {
 border-style: solid;
 border-width: 1px;
 border-color: black
}

table.inner {
 width: 100%;
 height: 100%; /* this has no effect */
 border-style: solid;
 border-width: 5px;
 border-color: green;
 border-spacing: 0px;
 border-collapse: separate;
 padding: 0px;
}

See the result here [jsfiddle.net].

The 100% width in the CSS works fine, but the 100% height does not work, either in the HTML or in the CSS. How do I get this inner table to fully occupy the cell in the outer table?

Thanks - Rowan

[londrum]

i dont think that there is an easy way to do that cross-browser if the cell its in doesn't have a fixed height. but i suppose you could fake it with a <div> underneath the table.

dont do border-bottoms on the table, and dont do border-tops on the div. that way they will seem to merge together


as long as the parent container has a height you should be able to assign 100% height to the <div>

[lucy24]

border-spacing: 0px;
border-collapse: separate;

What's the reason for doing it this way rather than simply

border-collapse: collapse;

? (Nothing to do with the question, just had to wonder.)

[RowanSB]

Because I'm trying to create an "embossed" effect border, both around the outer table, and between the cells of the outer table, and between the cells of the inner table, and between the cells of the inner table and a cell of the outer table where these are adjoining. I want all of these borders to look the same. Each border should have three components, a left/top element, a middle element which is always white, and a bottom/right element. The left, top, bottom and right elements are all different colours to give the embossed effect. The user should not be able to detect that the inner tables are separate from the outer.

The middle element of the borders is created by using cell-spacing, so this can't be zero. border-collapse can't be collapse, because I need the cell and table borders to be distinct, and in different colours, as described above.

You may well ask why I can't create the same effect much more easily using colspan and rowspan. This is what I started from, but it doesn't work for my application because I need to be able to sort the table using Javascript by manipulating the DOM, and using colspan and rowspan completely messes this up.

So that's how I got to where I am now...

Rowan

[alt131]

Hi RowanSB, welcome to WebmasterWorld :) and thanks for providing a code sample that makes it easy to see the issue.

Sounds like a fun challenge ;)

Going back to the original issue, every time I look at the sample I wonder if you want the table to be 100% height of the parent, or the <td>'s to be 200px high. The reason I ask is because the second td has already been set to height:200px, and it rather looks as if you are needing the table to expand to be the same height. As Londurm refers, 100% height needs a height on a parent. But is it possible to deal with this by setting the 200px height on the <tr> - that would also dimension the second td at the same time.

[RowanSB]

Thanks for your thoughts on this.

I only put the 200px height in to make sure the row of the outer table was higher than the default height of the inner table - otherwise you can't see the problem. In practice the outer table row height would be determined by the conents of the other cells in the row - typically text and/or images. The problem arises if the contents of the other cells in the outer table row causes the row height to be greater than required by the inner table. In this case I want the inner table to expand to fill the space - otherwise the borders go in the wrong place.

Does that make sense?

Any ideas how to make it do this?

Thanks - Rowan

[londrum]

it sounds like it should be easy-peasy, but i dont think there is a reliable way of doing it cross-browser. you cant make the table height stretch to 100% if the containing box is a non-fixed height. you can only make it stretch to a fixed height.

you need to fake it.
maybe you could give the cell a background image, which is spaced the same as the borders of the table (including the bottom edge). if you leave the bottom-border off the table, then people wont be able to tell the difference