css 表格：具有交替行颜色的固定列？

Question

我正在尝试创建一个 table 具有固定的第一列和着色交替行。我已经固定了第一列，并使用第 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 class 添加一个特例：

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 class 绝对定位并且与下方 table 的渲染混乱有关。我在 Chrome 的开发工具中注意到，该特定单元格设置为 display: block，但其余单元格设置为 display: table-cell。这可能是另一个原因。其他人必须给你那个答案:)

Answer 2

您在 "tr" 标签上设置了背景颜色，但您的第一个 "td" 位于 "tr" 之外。要解决此问题，您应该在 "td" 上使用背景而不是 "tr":

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

并将其宽度更改为 100px：

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

另外我认为你应该删除这个的 box-shadow:

table.standings td:nth-child(1) {
    border-right: 1px solid #e6e6e6;
    /*box-shadow: 3px 0px 3px -3px rgba(0, 0, 0, 0.4);*/
}

css 表格：具有交替行颜色的固定列？

css tables: fixed column with alternate row colors?

css

css-selectors

css-tables