css - 带有表格和溢出 div 的背景和 z-index

Question

我正在尝试弄清楚如何进行这项工作。不应该 background:red 外表的 td 覆盖所有其他的吗？为什么这个例子以黄色背景结束，尽管那是嵌套在 DOM 最下方的元素？

<style type="text/css">
    table, td, div {
    height: 200px;
    width: 400px;
}
</style>

<table class="outer" cellpadding="0" cellspacing="0">
<tr>
    <td style="background: red">
    <div style="overflow:auto;background:green">
    <table class="inner" style="width:800px">
        <tr>
            <td style="background:yellow"></td>
        </tr>
    </table>
    </div>
    </td>
</tr>
</table>

这是一个 JSFiddle for this .

总结...我试图用父 div 中的背景以及外部表的父 td 覆盖内部表格单元格的背景颜色。这可能吗？

Answer 1

Td里面的后台说了算。所以你在技术上不能单独使用 css 来完成。即使您在 div 样式中放置一个 !important，它也不会起作用。无论如何，您可以通过 js 修复该问题并将 td 的颜色替换为另一种颜色。