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。这可能是它的另一个原因。其他人将不得不给你答案：）

Answer 2

你在＆＃34; tr＆＃34;上制作了背景颜色。标签，但你的第一个＆＃34; td＆＃34;留在＆＃34; tr＆＃34;之外。要解决此问题，您应该使用＆＃34; td＆＃34;而不是＆＃34; tr＆＃34;：

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

另外我认为你应该删除这个的阴影：

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

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

2 个答案: