HTML中结合rowspan与colspan时，如何指定单元格颜色优先级？

在HTML表格中结合使用rowspan和colspan时，单元格颜色的重叠区域会被后渲染的单元格覆盖。比如下面的例子里，通过colspan创建的黄色行就盖住了rowspan红色列的交叉区域：

对应的代码：

<table>
  <tr>
    <td>&nbsp;&nbsp;&nbsp;</td>
    <td rowspan=3 style='background-color: red'>&nbsp;&nbsp;&nbsp;</td>
    <td>&nbsp;&nbsp;&nbsp;</td>
  </tr>
  <tr>
    <td colspan=3 style='background-color: yellow'>&nbsp;&nbsp;&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;&nbsp;&nbsp;</td>
    <td>&nbsp;&nbsp;&nbsp;</td>
    <td>&nbsp;&nbsp;&nbsp;</td>
  </tr>
</table>

你推测的原因是对的——浏览器会按照HTML中单元格出现的顺序渲染，后声明的单元格样式会覆盖先声明的重叠区域。要让rowspan对应的颜色优先生效，有两种可行方案：

方案一：通过CSS定位提升渲染层级 #

给带rowspan的单元格添加相对定位和更高的z-index值，让它的渲染层级高于后续的colspan单元格：

<table>
  <tr>
    <td>&nbsp;&nbsp;&nbsp;</td>
    <td rowspan=3 style='background-color: red; position: relative; z-index: 1;'>&nbsp;&nbsp;&nbsp;</td>
    <td>&nbsp;&nbsp;&nbsp;</td>
  </tr>
  <tr>
    <td colspan=3 style='background-color: yellow'>&nbsp;&nbsp;&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;&nbsp;&nbsp;</td>
    <td>&nbsp;&nbsp;&nbsp;</td>
    <td>&nbsp;&nbsp;&nbsp;</td>
  </tr>
</table>

方案二：用!important强制提升样式优先级 #

在红色单元格的背景色样式后添加!important，直接提升该样式的优先级：

<table>
  <tr>
    <td>&nbsp;&nbsp;&nbsp;</td>
    <td rowspan=3 style='background-color: red !important;'>&nbsp;&nbsp;&nbsp;</td>
    <td>&nbsp;&nbsp;&nbsp;</td>
  </tr>
  <tr>
    <td colspan=3 style='background-color: yellow'>&nbsp;&nbsp;&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;&nbsp;&nbsp;</td>
    <td>&nbsp;&nbsp;&nbsp;</td>
    <td>&nbsp;&nbsp;&nbsp;</td>
  </tr>
</table>

注意：!important虽然操作简单，但会打乱CSS的正常优先级规则，建议优先使用定位层级的方案。

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