您可以大大简化 HTML 标记和 CSS，而且无需使用 Javascript。

• 首先，除了隔行样式之外，所有类都可以显示出来（除非您不关心 IE 8 及以下版本，在这种情况下，您可以删除 IE 条件 CSS 和类名。请参阅 浏览器 CSS 选择器兼容性图表 。）
• 其次，将子标题内的每个 td 更改为 th 。
• 第三，在父 tbody 上使用 :hover 伪选择器，按指定方式设置 th 的样式。

请参阅此 在 jsfiddle 中工作 ，经测试可在 IE 7 和 Firefox 14 中完美运行。

以下是 CSS：

table { border-collapse:collapse; }
thead { color: #FFF; background-color: #000; }

tbody th { color: #FFF; font-weight: bold; background-color: #F00; text-align:left; }
tbody:hover th { background: #0F0; }

tbody tr:nth-child(odd) { background-color:#EEE; }
tbody tr:hover td { background: #FF0; }

样式说明：

• CSS 属性“background”需要的不仅仅是颜色，还会重置其他属性。如果您只想设置背景颜色，请使用“background-color”。
• 为了使特异性规则使 IE 赋予其比奇数行特殊颜色更高的优先级， tr:hover 上额外的 td 是必需的。
• “奇数”行实际上是数据的偶数行，因为子标题占用了第一个奇数行。
• 在表格上直接使用 CSS border-collapse:collapse 而不是 cellspacing 。

我必须将 IE 的条件 CSS 放在小提琴的 HTML 部分，因为它必须位于 style 标记之外。

<!--[if lte IE 8]>
<style type="text/css">
  tbody tr.odd { color: #000; background: #EEE; }
</style>
<![endif]-->

这是 HTML。看看现在有多干净？

<table>
   <thead>
      <tr>
         <th>MAIN HEADER</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th>Sub-Header 1</th>
      </tr>
      <tr>
         <td>Contents of row 1</td>
      </tr>
      <tr class="odd">
         <td>Contents of row 2</td>
      </tr>
      <tr>
         <td>Contents of row 3</td>
      </tr>
   </tbody>
   <tbody>
      <tr>
         <th>Sub-Header 2</th>
      </tr>
      <tr>
         <td>Contents of row 1</td>
      </tr>
   </tbody>
   <tbody>
      <tr>
         <th>Sub-Header 3</th>
      </tr>
      <tr>
         <td>Contents of row 1</td>
      </tr>
      <tr class="odd">
         <td>Contents of row 2</td>
      </tr>
   </tbody>
</table>

最后，我意识到这些颜色可能只是例子，所以我可以建议明亮的原色不太适合人类的认知反应吗？你可以选择一种突出显示效果。请参阅我为你整理的 工作示例 ，使用的颜色（在我看来）更令人愉悦。看看当你将鼠标悬停在该部分上时，它是如何“发光”的？漂亮极了！

注意：在 IE8 及之前的版本中，右侧会有一个额外的边框。如果您有一个多列表格，并且您喜欢内边框，并且想要支持 IE8 及以下版本，则需要向每行的最后一个单元格添加一个类，以便可以删除其右边框。

您可以使用纯 CSS 实现此目的（具有通常的浏览器兼容性条件），因此假设您使用的是相对较新的 Chrome、Safari、Firefox、Opera 或可能是 IE 9（或更高版本）：

tbody:hover tr.sub-header {
    background-color: #0f0;
}

tbody tr.sub-row:hover {
    background-color: #f90;
}​

JS Fiddle 演示 （显然，请根据您的喜好调整颜色；这些只是为了演示的目的）。

当然，值得一提的是，某些浏览器可能不会显示 tr 元素的 background-color （因为它显示在 td 元素的 background-color 的 后面 ），在这种情况下，您可能需要修改选择器以定位相关的 td 元素而是：

tbody:hover tr.sub-header td {
    background-color: #0f0;
}

tbody tr.sub-row:hover td {
    background-color: #f90;
}​