如何为嵌套的 HTML 表格单元格提供透明背景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6311930/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to give a nested HTML table cell a transparent background?
提问by JToland
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
我正在创建一个 HTML 文件，其中包含一个具有交替行颜色的表格。此表中的一列是一组包含子表的单元格。我的问题是我无法让子表与它们所属的行具有相同的背景颜色。我试过有一个 CSS 类
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.
此外，这必须在 IE 中工作。我知道，我知道，但是……事情就是这样。
Thanks!
谢谢！
回答by rahim asgari
Use * css selector:
使用* css selector：
table tr.row1 td * {
background-color: COLOR1;
}
table tr.row2 td * {
background-color: COLOR2;
}
回答by JToland
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:Whiteincluded 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.
此文件正在以编程方式构建。虽然我负责最终格式化文档的代码，但其他人编写了实际构建原始 HTML 文件的部分代码。我刚刚注意到，在过去 45 分钟左右调试了这个问题后，<tr>标签实际上style=background-color:White包含了一个硬编码，这是我在查看子表代码时不知道并且遗漏的。我删除，重新测试，这就是问题所在。
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!
抱歉，我现在在这里提出这个问题，因为我已经注意到这是一个愚蠢的“错误”，结果background-color:transparent;毕竟工作正常。谢谢你的帮助！
回答by Jeff Puckett
Make sure that you are more specificwith your CSS selector on the subtable than you are on its parent.
确保子表上的 CSS 选择器比父表上的 CSS 选择器更具体。
It looks like you're applying background-colorstyle to odd numbered <tr>in general, so apply the background-color: transparent;to a <tr>specific class on the subtable.
它看起来像你申请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>回答by saphirantcross
Try this (CSS3 required)
试试这个（需要 CSS3）
opacity: ##;
Where ## is a decimal value between 0 and 1.
其中## 是介于 0 和 1 之间的十进制值。
0 is transparent 100%, 1 is opaque 100%. Values inbetween are decimals (want 30% transparency? Use 0.7)
0 是 100% 透明，1 是 100% 不透明。中间的值是小数（想要 30% 的透明度？使用 0.7）
