嵌套Table背景样式继承问题：如何让子Table使用独立背景？

问题根源 #

你当前的CSS用了全局table选择器，会把样式强制应用到页面所有<table>元素（包括内层子Table）；另外子Table的背景属性写法有错误：一是拼写错了图片名（backgroun2.png应为background2.png），二是HTML属性里不该用冒号，要改成等号。

解决方案 #

1. 给外层Table加类名，限定样式范围

给外层Table添加自定义类（比如outer-table），让CSS只作用于这个类的Table，彻底避免影响子Table：

<style>
.outer-table{
  background: #000 url(background1.png);
  height: 100%;
  border: none;
  margin: 0;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center; 
}
</style>

外层Table标签修改：

<table class="outer-table" width="100%" height="100%" border="0" ... >

2. 修正子Table的属性并设置独立样式

给子Table加类名（比如inner-table），单独定义它的样式，同时修正之前的属性错误：

<style>
.inner-table{
  background: url(background2.png);
  height: auto; /* 避免继承外层100%高度 */
  background-size: cover; /* 按需设置背景缩放 */
}
</style>

子Table标签修改：

<table class="inner-table" width="800" height="10">

完整修正后代码示例 #

<html>
<head>
<title></title> 
<style>
.outer-table{
  background: #000 url(background1.png);
  height: 100%;
  border: none;
  margin: 0;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center; 
}
.inner-table{
  background: url(background2.png);
  height: auto;
  background-size: cover;
}
</style>
</head>

<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" margin="0" padding="0" link="#1FOOFF" vlink="#1FOOFF" alink="#1FOOFF" >
<center>
<table class="outer-table" width="100%" height="100%" border="0" marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" margin="0" padding="0" cellspacing="0" cellpadding="0" >
 <tr> 
  <td width="100%" height="100%" valign="top" >

<table class="inner-table" width="800" height="10">
<tr>
<td valign="center" width="25" height="10" bgcolor="red" >
<font size="5" face="Arial"><b>&nbsp;NEWS:&nbsp;&nbsp;</b>
</td>
<td valign="top" width="575" height="10" bgcolor="black" >
<center><font size="5" face="Arial"><font color="#FFFFFF"><marquee bgcolor="black" behavior="scroll" direction="left" >Now is the time to buy Gold and Silver.</marquee></font></font></center>
</td>
</tr>
</table>

</td>
</tr>
</table>
</center>
</body>
</html>

内容的提问来源于stack exchange，提问作者DJZman