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

我正在創建一個包含交替行顏色的表格的HTML文件。此表中的一列是一組包含子表格的單元格。我的問題是，我無法讓子表具有與其所在的行相同的背景顏色。我已經嘗試了一個CSS類與如何爲嵌套的HTML表格單元格提供透明背景？

background-color: transparent;

但這似乎並沒有改變任何東西。

可能更容易理解視覺問題。我模糊了文本並圈出了子表格來突出顯示它們。基本上，我需要灰色背景的行中的白色區域也具有灰色背景（對於他們的整個表格），所以你不能真正告訴它是單獨的表格。

enter image description here

此外，這在IE工作。我知道，我知道，但是......事情就是這樣。

謝謝！

來源

2011-06-10 JToland

請提供的代碼示例。 – FatherStorm 2011-06-10 20:52:22

如果你可以提供一個[jsFiddle]（http://jsfiddle.net/）或[JS Bin]（http://jsbin.com/）測試用例，這將會很快得到解決。 – thirtydot 2011-06-10 21:01:31

使用* css selector：

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

來源

2011-06-10 20:54:31

這*可能*工作，但最好找出哪些元素實際上有白色'背景顏色'，並且只設置它們。 – thirtydot 2011-06-10 21:02:54

此文件被編程建造。雖然我負責最終格式化文檔的代碼，但其他人已經編寫了實際構建原始HTML文件的代碼的一部分。我剛剛注意到，在過去45分鐘左右調試了這個問題之後，<tr>標籤實際上包含一個style=background-color:White包含的硬編碼，在我查看子表代碼時我並未意識到這一點，並且已經錯過了。我刪除，重新測試，這就是問題所在。

對不起，我現在提出這個問題，現在我已經注意到這是一個愚蠢的'錯誤'，結果background-color:transparent;工作正常。謝謝你的幫助！

來源

2011-06-10 21:11:46 JToland

-1

嘗試此（必需CSS3）

opacity: ##;

其中##是一個十進制值0和1之間

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

來源

2014-04-16 18:20:38 saphirantcross

確保您的子選擇器上的CSS選擇器比您父級上的更多，請使用specific。

它看起來像你申請background-color風格奇數一般<tr>，所以適用於子表的background-color: transparent;到<tr>特定類。

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>

來源

2014-11-30 22:57:58

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

回答

相關問題