Question

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

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

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

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

http://www.cssdesk.com/u7ZUu

或

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，希望你不介意。

我把笔分到了这里：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;
      }
    }
  }
}

表中列的交替背景颜色？

1 个答案: