如何为嵌套的HTML表格单元格提供透明背景？

Question

我正在创建一个包含具有交替行颜色的表的HTML文件。该表中的一列是包含子表的一组单元格。我的问题是我不能让子表具有与它们所属的行相同的背景颜色。我尝试过使用

的CSS类

background-color: transparent;

但这似乎没有任何改变。

通过视觉可能更容易理解问题。我对文本进行了模糊处理，并在子表中圈出来突出显示它们。基本上，我需要灰色背景的行中的那些白色区域也有灰色背景（对于整个表格），所以你不能真正告诉它是一个单独的表。

此外，这必须在IE中工作。我知道，我知道，但......就是这样。

谢谢！

Answer 1

使用* css selector：

table tr.row1 td * {
    background-color: COLOR1;
}
table tr.row2 td * {
    background-color: COLOR2;
}

Answer 2

此文件正在以编程方式构建。虽然我负责最终格式化文档的代码，但其他人编写了实际构建原始HTML文件的部分代码。我刚刚注意到，在过去45分钟左右调试此问题之后，<tr>标签实际上包含了style=background-color:White包含的硬编码，这是我不知道的并且当我查看子时已经错过了-table的代码。我删除了，重新测试，这就是问题。

抱歉，我现在已经注意到这是一个非常愚蠢的'错误'，结果background-color:transparent;工作正常。谢谢你的帮助！

Answer 3

确保您在子表上使用CSS选择器的specific比在其父级上的{{3}}更多。

您通常会将background-color样式应用于奇数<tr>，因此请将background-color: transparent;应用于子表上的<tr>特定类。

＆＃13;

＆＃13;

table tr:nth-child(even) {
  background-color: gray;
}

table.subTable tr {
  background-color: transparent;
}

td {
  border: 1px solid black;
}

＆＃13;

<table>

  <tr>
    <td>
      super content
    </td>

    <td>
      <table class="subTable">
        <tr>
          <td>sub content</td>
          <td>more sub content</td>
        </tr>
        <tr>
          <td>sub content</td>
          <td>more sub content</td>
        </tr>
      </table>
     </td>
  </tr>

  <tr>
    <td>
      super content
    </td>

    <td>
      <table class="subTable">
        <tr>
          <td>sub content</td>
          <td>more sub content</td>
        </tr>
        <tr>
          <td>sub content</td>
          <td>more sub content</td>
        </tr>
      </table>
     </td>
  </tr>

  <tr>
    <td>
      super content
    </td>

    <td>
      <table class="subTable">
        <tr>
          <td>sub content</td>
          <td>more sub content</td>
        </tr>
        <tr>
          <td>sub content</td>
          <td>more sub content</td>
        </tr>
      </table>
     </td>
  </tr>

  <tr>
    <td>
      super content
    </td>

    <td>
      <table class="subTable">
        <tr>
          <td>sub content</td>
          <td>more sub content</td>
        </tr>
        <tr>
          <td>sub content</td>
          <td>more sub content</td>
        </tr>
      </table>
     </td>
  </tr>

</table>

＆＃13;

＆＃13;

＆＃13;

Answer 4

试试这个（需要CSS3）

opacity: ##;

其中##是介于0和1之间的十进制值。

0是透明的100％，1是不透明的100％。中间值为小数（要求30％透明度？使用0.7）