Here is a simple example of a table. I want the header row to be grey, alternate rows below it to be yellow, and the first column to be orange. I'm having trouble achieving this with CSS. How can I do this without individually styling each cell?
View the code on JSFiddle
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
padding: 5px;
}
table {
width: 100%;
}
th {
background-color: grey;
color: white;
}
tr:nth-child(odd) {
background-color: yellow;
}<table>
<col style="background-color: orange;" />
<tr>
<th> </th>
<th>Bank</th>
<th>Amount</th>
</tr>
<tr>
<td>John</td>
<td>ABC</td>
<td>12345</td>
</tr>
<tr>
<td rowspan="2">David</td>
<td>DEF</td>
<td>456789</td>
</tr>
<tr>
<td>GHI</td>
<td>147258</td>
</tr>
<tr>
<td>Kevin</td>
<td>JKL</td>
<td>258369</td>
</tr>
<tr>
<td>Mike</td>
<td>MNO</td>
<td>369258</td>
</tr>
</table>