CSS 表 : fixed column with alternate row colors?

Question

我正在尝试创建一个具有固定第一列并为交替行着色的表格。我已经固定了第一列，并使用第 nth-child 对交替行进行了着色。问题是交替行颜色未应用于固定列。参见 jsfiddle .这是我第一次尝试使用 CSS，所以我确信我遗漏了一些相当明显的东西。

html

<div class="wb-standings-table"><table class="standings">
  <tr>
    <td class="wb-standings-col1"><b>Player</b></td>
    <th>PTS↑</th>
    <th>PPR</th>
    <th>TPP</th>
    <th>SPC</th>
    <th>TUG</th>
    <th>LOG</th>
    <th>CRK</th>
    <th>EUC</th>
    <th>PKR↓</th>
    <th>DRT</th>
    <th>PNG</th>
  </tr>
  <tr>
    <td class="wb-standings-col1">Chuck</td>
    <td class="wb-gray">9</td>
    <td class="wb-gray">15</td>
    <td class="wb-gray">24</td>
    <td class="wb-gray">-</td>
    <td class="wb-gray">2</td>
    <td class="wb-gray">-</td>
    <td class="wb-gray">3</td>
    <td class="wb-gray">3</td>
    <td class="wb-green">0</td>
    <td class="wb-green">1</td>
    <td class="wb-green">0</td>
  </tr>
  <tr>
    <td class="wb-standings-col1">Rico</td>
    <td class="wb-gray">4</td>
    <td class="wb-gray">10</td>
    <td class="wb-gray">14</td>
    <td class="wb-gray">-</td>
    <td class="wb-gray">0</td>
    <td class="wb-gray">3</td>
    <td class="wb-gray">-</td>
    <td class="wb-gray">0</td>
    <td class="wb-green">0</td>
    <td class="wb-green">1</td>
    <td class="wb-gray">0</td>
  </tr>

CSS

.wb-standings-container {
    width:auto;
    white-space:nowrap;
    background-color:#fff;
    border-radius:0px;
    margin:0px;
    overflow-x:auto;
}
.wb-standings-header {
    font-size:1.5em;
    margin:10px;
    font-weight:bold;
}
.wb-standings-footer {
    font-size:.8em;
    margin:8px;
}
.wb-standings-table {
    overflow-x:auto;  
    margin-left:100px; 
    overflow-y:visible;
}
table.standings {
    border-collapse:collapse;
}
table.standings th {
    white-space:nowrap;
    color:#808080;
    text-decoration:underline;
}
table.standings td {
    white-space:nowrap;
    text-align:center;
    min-width: 50px;
}
table.standings tr:nth-child(even) {background: #f2f2f2}
table.standings tr:nth-child(odd) {background: #FFF}
table.standings td:nth-child(1) {
    border-right: 1px solid #e6e6e6;
    box-shadow: 3px 0px 3px -3px rgba(0, 0, 0, 0.4);
}
table.standings td:nth-child(4) {border-right: 1px solid #e6e6e6;}
table.standings tr:nth-child(1) {
    border-bottom: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
}

table.standings .wb-standings-col1 {
    position:absolute; 
    width:90px; 
    left:8px;
    top:auto;
    text-align:left;
    color:#057aff;
}

Answer 1

您可以像这样向 col1 类添加一个特例:

table.standings tr:nth-child(even),
table.standings tr:nth-child(even) .wb-standings-col1 {
  background: #f2f2f2
} 
table.standings tr:nth-child(odd),
table.standings tr:nth-child(odd) .wb-standings-col1 {
  background: #FFF
}

您可以通过使用逗号分隔将另一个选择器添加到相同的 CSS 定义。这样您仍然可以通过修改单个 CSS 规范来控制这两个定义。

至于为什么会这样……我不太确定。我猜这与 .wb-standings-col1 类是绝对定位的这一事实有关，这会扰乱下方表格的呈现。我在 Chrome 的开发工具中注意到，该特定单元格设置为 display: block，但其余单元格设置为 display: table-cell。这可能是另一个原因。其他人必须给你那个答案:)