css - 使用css为td内的div着色

Question

我有简单的需要在 td 元素内为 div 着色。 如果我使用 position:absolute 彩色 div 会填满整个屏幕，如果我使用 relative 则什么也不会发生..

我的代码:

<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>

真诚感谢任何帮助..

谢谢

Answer 1

<td>需要是相对的，<div> - 绝对，然后 td 将被视为其中内容的容器。

<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>

此外，最好只创建一个样式表而不是在标签内创建样式

td{
    position:relative;
    ...
}
td div{
    position:absolute;
    ...
}