Reputation: 2354
I have simple need to color a div inside a td element. If I use position:absolute the colored div fills up the entire screen, If I use relative nothing happens..
My code:
<table width="100%" border="1">
<tr height= "200px">
<td>
<div style="width: 100%; height: 100%; z-index: 0; background-color: green; position:relative; top: 0; left: 0;"></div>
</td>
<td>
<div style="width: 100%; height: 100%; z-index: 0; background-color: red; position:relative; top: 0; left: 0;"></div>
</td>
</tr>
</table>
Any help is sincerely appreciated..
Thanks
Upvotes: 0
Views: 5474
Reputation: 2617
<td>
needs to be relative, <div>
- absolute, then the td will be treated as a container to what's inside it.
<table width="100%" border="1">
<tr height= "200px">
<td style="position:relative;">
<div style="width: 100%; height: 100%; z-index: 0; background-color: green; position:absolute; top: 0; left: 0;"></div>
</td>
<td style="position:relative;">
<div style="width: 100%; height: 100%; z-index: 0; background-color: red; position:absolute; top: 0; left: 0;"></div>
</td>
</tr>
</table>
Also, it would be better to just create a stylesheet instead of style inside a tags
td{
position:relative;
...
}
td div{
position:absolute;
...
}
Upvotes: 3