CODEWITHSUNDEEP
css
Arnab
Arnab

Reputation: 2354

color a div inside a td using css

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

Answers (1)

cyborg86pl
cyborg86pl

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

Related Questions