Html 为表格中的列交替背景色？

我正在为表中的列添加交替背景色，我有一个用于非常简单的表的CSS代码

但是当它变得有点复杂（rowspan/colspan）时，我的CSS代码就失败了。有人能帮我吗？指引我该往哪个方向修

我正在处理的表代码都是由其他人生成的，我无法控制它。他们将制作的表都是有效的HTML代码，我需要制作的CSS应该可以处理它们

您可以在此处看到我的工作/失败CSS代码：

或

---

这是一种疯狂的标记，但它符合您的要求。我摆脱了一些无用的过度专一性，而我正在使用SCSS，希望你不介意

我把你的笔叉在这里：

以下是相关代码：

table {
  border-top: 2px solid #00ABEF;
    border-bottom: 2px solid #00ABEF;
    background-colo: #FFF;
    font-size: 11px;
}

table th {
    background-color: #B8E5FA;
    border-right: 1px solid #FFF;
    border-left: 1px solid #FFF;
    padding: 4px 2px;
}

table td {
    padding: 4px 2px;
    text-align: center;
}

table td:first-child {
    text-align: left;
}

table td:nth-child(even){ 
 background-color: #E2F4FE;
}

table td:nth-child(odd){ 
 background-color: #FFF;
}

.specialtable ~ table {
  tr:nth-child(2n) {
    td:first-child {
      background-color: #E2F4FE;
    }
    td:nth-child(2n) {
      background-color: #fff;
    }
    &:nth-child(8) {
      td:first-child {
        background-color: #fff;
      }
    }
  }
}

---

请看下面的答案：

table {
  border-top: 2px solid #00ABEF;
    border-bottom: 2px solid #00ABEF;
    background-colo: #FFF;
    font-size: 11px;
}

table th {
    background-color: #B8E5FA;
    border-right: 1px solid #FFF;
    border-left: 1px solid #FFF;
    padding: 4px 2px;
}

table td {
    padding: 4px 2px;
    text-align: center;
}

table td:first-child {
    text-align: left;
}

table td:nth-child(even){ 
 background-color: #E2F4FE;
}

table td:nth-child(odd){ 
 background-color: #FFF;
}

.specialtable ~ table {
  tr:nth-child(2n) {
    td:first-child {
      background-color: #E2F4FE;
    }
    td:nth-child(2n) {
      background-color: #fff;
    }
    &:nth-child(8) {
      td:first-child {
        background-color: #fff;
      }
    }
  }
}