html - 表格中列的交替背景颜色？

Question

我正在为表格中的列设置交替背景色，并且我有一个适用于非常简单表格的 CSS 代码。

但是当它变得有点复杂时(使用 rowspan/colspan)我的 CSS 代码失败了。有人可以帮我吗？指导我应该采取哪个方向来修复它？

我正在处理的表格代码都是别人生成的，我无法控制它。他们制作的表格都是有效的 HTML 代码，我需要制作的 CSS 应该适用于它们。

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

http://www.cssdesk.com/u7ZUu

或

http://codepen.io/anon/pen/ORPLgz

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

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

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

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

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

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

Answer 1

这是一种有点疯狂的标记，但它可以满足您的需求。我摆脱了一些无用的过度特异性，我正在使用 SCSS，希望你不介意。

我在这里 fork 了你的笔:http://codepen.io/memoblue/pen/yayBpA

相关代码如下:

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;
      }
    }
  }
}