How to give a nested HTML table cell a transparent background?

I'm creating an HTML file containing a table with alternating row colors. One of the columns in this table is a set of cells containing sub-tables. My problem is that I can't get the sub-tables to have the same background color as the row in which they're a member. I've tried having a CSS class with

background-color: transparent;

but that doesn't seem to change anything at all.

It might be easier to understand the problem with a visual. I fuzzed-out the text and circled the sub-tables to highlight them. Basically, I need those white areas within the 开发者_如何转开发rows with a gray background to also have gray backgrounds (for their entire table) so you can't really tell it's a separate table.

Also, this has to work in IE. I know, I know, but...that's how it is.

Thanks!

Use * css selector:

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

This file is being built programmatically. While I'm in charge of the code which ends up formatting the document, others have written parts of the code which actually builds the raw HTML file. I just noticed, after debugging this problem for the past 45 min or so, that the <tr> tags are actually having a style=background-color:White included hardcoded which I was unaware of and had missed when I was looking into the sub-table's code. I removed, retested, and that was the problem.

Sorry I brought this up on here now that I've noticed it was such a dumb 'mistake', turns out the background-color:transparent; works fine after all. Thanks for your help!

Make sure that you are more specific with your CSS selector on the subtable than you are on its parent.

It looks like you're applying background-color style to odd numbered <tr> in general, so apply the background-color: transparent; to a <tr> specific class on the subtable.

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

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

td {
  border: 1px solid black;
}

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

Try this (CSS3 required)

opacity: ##;

Where ## is a decimal value between 0 and 1.

0 is transparent 100%, 1 is opaque 100%. Values inbetween are decimals (want 30% transparency? Use 0.7)