css - 在设置时混合背景颜色

Question

每个人都喜欢表格中奇数行和偶数行的背景略有不同以改善方向:

但有时，列也需要突出显示:

可以做一个技巧让这两个设置自动混合吗？你知道，我可以通过为每个类设置两种颜色来手动完成:

tr:nth-child(odd) td {
  background-color: #CFDCFF;
}
tr:nth-child(even) td {
  background-color: #E2E4E4;
}
tr:nth-child(odd) td.result {
  background-color: #??????;
}
tr:nth-child(even) td.result {
  background-color: #??????;
}

但是自动化会使代码更具可读性。

Answer 1

在我测试的浏览器(Chrome、Safari、Firefox)上，可以将灰色和蓝色背景应用到行本身，然后在表格单元格上覆盖略微透明的黄色和绿色背景。虽然它看起来很糟糕:/

tr:nth-child( odd ) {
  background-color: #CFDCFF;
}

tr:nth-child( even ) {
  background-color: #E2E4E4;
}

tr > :not( :first-child ):not( :last-child ) {
  background: rgba( 255, 255, 0, .15 );
}

tr > :last-child {
  background: rgba( 0, 255, 0, .15 );
}

table {
    border-spacing: 0;
}

th, td {
    padding: .25em;
}

<table>
    <tr>
        <th># <th>a <th>b <th>c <th>d <th>e <th>f <th>Result
    <tr>
        <th>0 <td>0 <td>0 <td>0 <td>0 <td>0 <td>0 <td>0
    <tr>
        <th>1 <td>0 <td>0 <td>0 <td>0 <td>0 <td>1 <td>1
    <tr>
        <th>2 <td>0 <td>0 <td>0 <td>0 <td>1 <td>0 <td>1
    <tr>
        <th>3 <td>0 <td>0 <td>0 <td>0 <td>1 <td>1 <td>1
    <tr>
        <th>4 <td>0 <td>0 <td>0 <td>1 <td>0 <td>0 <td>1