css tables: fixed column with alternate row colors?

Question

I'm trying to create a table with a fixed first column and colouring alternate rows. I've got the first column fixed, and alternate rows coloured using nth-child. The problem is that the alternate row colours is not applied to the fixed column. See jsfiddle. This is my first attempt at css so I'm sure I'm missing something fairly obvious.

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

You can just add a special case to the col1 class like so:

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
}

You can add another selector to the same CSS definition by using a comma to separate. That way you can still control both definitions by modifying a single CSS spec.

As to why this is happening.... I'm not really sure. I'm guessing it has something to do with the fact that the .wb-standings-col1 class is positioned absolutely and that messes with the rendering of the table underneath. I've noticed in Chrome's dev tools that that particular cell is set to display: block but the rest of the cells are set to display: table-cell. That may be another reason for it. Someone else will have to give you that answer :)