Menu
I would like to place a table A in a cell of another table B, such that table A covers the full height of the surrounding cell (which has variable height). Unfortunately it does not seem to help to set height=”100%” in table A. Can anybody help me with some code that works?
Below you can find some example code that tries to achieve above goal, but fails to do so…
In particular, I would like to have the green <div> of the first row and the red <div> of the second row to be placed directly next to each other, i.e. without any white space in between. So the inner table should adjust its height if a users changes the width of the browser window and thereby causes the row to get higher as the text in the left cell requires line breaks.
It might also be helpful if somebody could offer a solution without the use of such an inner table to achieve this goal of having the green and the red <div> directly next to each other.
Thanks a lot for your help,
Michael
[code]
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<body>
<table width=”100%” cellspacing=”0″ cellpadding=”0″>
<tr>
<td>
my text my text my text
</td>
<td width=”500px”>
<table style=”width:100%;border-collapse:collapse;border:1px solid blue;” height=”100%”>
<tr>
<td style=”padding:0px;spacing:0px;”>
<div style=”height:5px;position:relative;top:0px;background:red;”>
</td>
</tr>
<tr>
<td style=”height:100%;”>
<div style=”position:relative;top:0px;height:20px”>
<div style=”position:absolute;z-index:1;top:0px;height:20px;”>
<div style=”position:absolute;left:33px;width:2px;height:18px;top:1px;background:Magenta;”>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td style=”padding:0px;spacing:0px”>
<div style=”height:5px;position:relative;top:0px;background:green;”>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
my text my text my text my text my text my text my
</td>
<td width=”500px”>
<table style=”width:100%;border-collapse:collapse;border:1px solid blue;” height=”100%” >
<tr>
<td style=”padding:0px;spacing:0px;”>
<div style=”height:5px;position:relative;top:0px;background:red;”></div>
</td>
</tr>
<tr>
<td style=”height:100%;”>
<div style=”position:relative;top:0px;height:20px”>
<div style=”position:absolute;top:0px;height:20px;”>
<div style=”position:absolute;left:33px;width:2px;height:18px;top:1px;background:Magenta;”>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td style=”padding:0px;spacing:0px”>
<div style=”height:5px;position:relative;top:0px;background:green;”></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>