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

Question

我正在創建一個 HTML 文件，其中包含一個具有交替行 colors 的表。 此表中的一列是一組包含子表的單元格。 我的問題是我無法讓子表具有與它們所屬的行相同的背景顏色。 我試過用 CSS class

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包含硬編碼，當我查看 sub 時我沒有意識到並且錯過了-table 的代碼。 我刪除，重新測試，這就是問題所在。

抱歉，我現在在這里提出這個問題，因為我注意到這是一個愚蠢的“錯誤”，結果是background-color:transparent; 畢竟工作正常。 謝謝你的幫助！

Answer 3

試試這個（需要 CSS3）

opacity: ##;

其中 ## 是 0 到 1 之間的十進制值。

0 為 100% 透明，1 為 100% 不透明。 中間的值是小數（想要 30% 的透明度？使用 0.7）

Answer 4

確保子表上的 CSS 選擇器比父表上的選擇器更具體。

看起來您通常將background-color樣式應用於奇數<tr> ，因此請應用background-color: transparent; 到子表上的<tr>特定 class 。

 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>