How do I make a nested inner table occupy the full height of the containing cell? [Archive]

rowan.bradley

06-06-2010, 11:32 PM

I've got some nested tables. I want the inner tables to occupy the full height of the containing cell in the outer table, even if there is not enough information in the inner table to force it to do so (I just want the inner table, or maybe the bottom row of the inner table, to expand with white space to fill the space available). Of course, if the inner table needs to be higher than the containing cell, I want the containing cell's row to expand as necessary (as it does now).

How do I do this? I seem to have tried every combination of height=100% in the html elements and in the CSS style definitions without success.

Here is my html:
<tr>
<td>8</td>
<td>8</td>
<td>Wheeler</td>
<td>Time Becomes a Song: 1 Clock-a-clay</td>
<td class="contains-table"><table class="inner" cellspacing="0">
<tr>
<td class="res"><a href="music/midi/Wheeler_ClockAClay.mid">Midi</a></td>
<td class="sou">Janet</td>
</tr>
<tr>
<td class="res"><a href="music/midi/Wheeler_ClockAClay_S.mid">Midi (S)</a></td>
<td class="sou">Janet</td>
</tr>
</table></td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>Wheeler</td>
<td>Time Becomes a Song: 2. No single hour can stand for nought</td>
<td class="contains-table"><table class="inner" cellspacing="0" height="100%">
<tr height="100%">
<td class="res" height="100%"><a href="music/midi/Wheeler_NoSingleHour.mid">Midi</a></td>
<td class="sou" height="100%">Janet</td>
</tr>
</table></td>
</tr>
<tr>
<td>10</td>
<td>10</td>
<td>Wheeler</td>
<td>Time Becomes a Song: 3. O wert thou in the storm</td>
<td class="contains-table"><table class="inner" cellspacing="0">
<tr>
<td class="res"><a href="music/midi/Wheeler_OWertThouInTheStorm.mid">Midi (TTBB)</a></td>
<td class="sou">Janet</td>
</tr>
<tr>
<td class="res"><a href="music/midi/Wheeler_OWertThouInTheStorm_SATB.mid">Midi (SATB)</a></td>
<td class="sou">Janet</td>
</tr>
</table></td>
</tr>
Here is what it looks like:
http://www.sylvester-bradley.org/images/inner_table_height.jpg

Note that the right hand two cells in row 9 are not high enough to fill the space available, meaning that the bottom boundary is in the wrong place. Rows 8 and 10 are correct, because in these cases the inner table is naturally as high as or higher than the natural height of the containing cell.

And here is the relevant section of my stylesheet:
table.sortable {
padding: 0px;
margin: 0px;
border: solid;
border-top-color: #c0c0c0;
border-bottom-color: #808080;
border-left-color: #c0c0c0;
border-right-color: #808080;
border-width: 1px;
}
table.inner {
width: 100%;
border-width: 0px;
padding: 0px;
margin: 0px;
}
table.sortable th, table.sortable td, table.inner td {
padding: 3px;
margin: 0px;
border: solid;
border-top-color: #808080;
border-bottom-color: #c0c0c0;
border-left-color: #808080;
border-right-color: #c0c0c0;
border-width: 1px;
text-align: left;
vertical-align: top;
}
table.sortable td.contains-table {
border-width: 0px;
text-align: center;
padding: 0px;
margin: 0px;
}
td.res {
width: 25%;
}
td.sou {
width: 75%;
}

I hope someone can suggest how to do this!

Thanks - Rowan

mbaker

06-07-2010, 01:08 AM

I think something is missing.

When I combine your code and stylesheet into a single page, it does not display in the same way as your image:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
<title>Inner Table</title>
<style type="text/css">
table.sortable {
padding: 0px;
margin: 0px;
border: solid;
border-top-color: #c0c0c0;
border-bottom-color: #808080;
border-left-color: #c0c0c0;
border-right-color: #808080;
border-width: 1px;
}
table.inner {
width: 100%;
border-width: 0px;
padding: 0px;
margin: 0px;
}
table.sortable th, table.sortable td, table.inner td {
padding: 3px;
margin: 0px;
border: solid;
border-top-color: #808080;
border-bottom-color: #c0c0c0;
border-left-color: #808080;
border-right-color: #c0c0c0;
border-width: 1px;
text-align: left;
vertical-align: top;
}
table.sortable td.contains-table {
border-width: 0px;
text-align: center;
padding: 0px;
margin: 0px;
}
td.res {
width: 25%;
}
td.sou {
width: 75%;
}
</style>
</head>
<body>
<h1>Inner Table</h1>
<table class="sortable" cellspacing='0'>
<tr>
<td>8</td>
<td>8</td>
<td>Wheeler</td>
<td>Time Becomes a Song: 1 Clock-a-clay</td>
<td class="contains-table"><table class="inner" cellspacing="0">
<tr>
<td class="res"><a href="music/midi/Wheeler_ClockAClay.mid">Midi</a></td>
<td class="sou">Janet</td>
</tr>
<tr>
<td class="res"><a href="music/midi/Wheeler_ClockAClay_S.mid">Midi (S)</a></td>
<td class="sou">Janet</td>
</tr>
</table></td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>Wheeler</td>
<td>Time Becomes a Song: 2. No single hour can stand for nought</td>
<td class="contains-table"><table class="inner" cellspacing="0" height="100%">
<tr height="100%">
<td class="res" height="100%"><a href="music/midi/Wheeler_NoSingleHour.mid">Midi</a></td>
<td class="sou" height="100%">Janet</td>
</tr>
</table></td>
</tr>
<tr>
<td>10</td>
<td>10</td>
<td>Wheeler</td>
<td>Time Becomes a Song: 3. O wert thou in the storm</td>
<td class="contains-table"><table class="inner" cellspacing="0">
<tr>
<td class="res"><a href="music/midi/Wheeler_OWertThouInTheStorm.mid">Midi (TTBB)</a></td>
<td class="sou">Janet</td>
</tr>
<tr>
<td class="res"><a href="music/midi/Wheeler_OWertThouInTheStorm_SATB.mid">Midi (SATB)</a></td>
<td class="sou">Janet</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

That said, my advice would be to do away with the inner tables, and instead use rowspans on the left-hand columns, as in:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
<title>Rowspans instead of Inner Table</title>
<style type="text/css">
table.sortable {
padding: 0px;
margin: 0px;
border: solid;
border-top-color: #c0c0c0;
border-bottom-color: #808080;
border-left-color: #c0c0c0;
border-right-color: #808080;
border-width: 1px;
}
table.sortable th, table.sortable td {
padding: 3px;
margin: 0px;
border: solid;
border-top-color: #808080;
border-bottom-color: #c0c0c0;
border-left-color: #808080;
border-right-color: #c0c0c0;
border-width: 1px;
text-align: left;
vertical-align: top;
}
td.res {
width: 10%;
}
td.sou {
width: 30%;
}
</style>
</head>
<body>
<h1>Rowspans instead of Inner Table</h1>
<table class="sortable" cellspacing='0'>
<tr>
<td rowspan="2">8</td>
<td rowspan="2">8</td>
<td rowspan="2">Wheeler</td>
<td rowspan="2">Time Becomes a Song: 1 Clock-a-clay</td>
<td class="res"><a href="music/midi/Wheeler_ClockAClay.mid">Midi</a></td>
<td class="sou">Janet</td>
</tr>
<tr>
<td class="res"><a href="music/midi/Wheeler_ClockAClay_S.mid">Midi (S)</a></td>
<td class="sou">Janet</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>Wheeler</td>
<td>Time Becomes a Song: 2. No single hour can stand for nought</td>
<td class="res" height="100%"><a href="music/midi/Wheeler_NoSingleHour.mid">Midi</a></td>
<td class="sou" height="100%">Janet</td>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">10</td>
<td rowspan="2">Wheeler</td>
<td rowspan="2">Time Becomes a Song: 3. O wert thou in the storm</td>
<td class="res"><a href="music/midi/Wheeler_OWertThouInTheStorm.mid">Midi (TTBB)</a></td>
<td class="sou">Janet</td>
</tr>
<tr>
<td class="res"><a href="music/midi/Wheeler_OWertThouInTheStorm_SATB.mid">Midi (SATB)</a></td>
<td class="sou">Janet</td>
</tr>
</table>
</body>
</html>