Even Odd rows for only one column in tables? - html

Question

I'm working with tables to display data on a webpage.
Right now I've got even odd for <tr> to have the rows alternating colors. However, I am going to be freezing the 1st column of the table and having the remaining columns scroll to the left and right.
At the moment, the columns that are scrolling to the left are being seen under the frozen column. If I apply a background color to the cells in the frozen column, the columns that are no longer to be displayed when scrolled to the left are then truly hidden.
I'm calling the first column's cells by using td:nth-child(1).
The problem is that I am using alternating row colors so assigning a background color to td:nth-child(1) makes all cells in that 1st row the same color.
Is it possible to add (odd) and (even) to the nth-child call?
I'd like to use a better method (if there is one) than just assigning classes to each of the cells in the first column.
(NOTE: Added my code 02/12/2018)
table.sidebyside {
width: 800px;
overflow-x: scroll;
}
table.sidebyside th:nth-child(1), table.sidebyside td:nth-child(1) {
width: 300px !important;
position:absolute;
}
table.sidebyside th:nth-child(2), table.sidebyside td:nth-child(2) {
padding-left: 300px !important;
}
table.sidebyside th {
background-color: #4b91ea;
height: 63px;
}
table.sidebyside td:nth-child(1) (odd) {
background-color: #fff;
}
table.sidebyside tr:nth-child (even) > td:nth-child(1) {
background-color: rgba(0,0,0,.05);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-12">
<div style="width:600px; overflow: auto;">
<table class="sidebyside table table-striped">
<tbody>
<tr>
<th>
</th>
<th>
Bronze-High Deductible
</th>
<th>
Silver-HMO
</th>
<th>
Gold-PPO Low
</th>
<th>
Gold-PPO Med
</th>
</tr>
<tr>
<td>
<b>
Score: </b>
</td>
<td>
<span class="text-green">
95 </span>
</td>
<td>
<span class="text-yellow">
77 </span>
</td>
<td>
<span class="text-danger">
32 </span>
</td>
<td>
<span class="text-danger">
24 </span>
</td>
</tr>
<tr>
<td>
<b>
RealCost: </b>
</td>
<td>
$4,7772.32
</td>
<td>
$6,024.81
</td>
<td>
$8,194.55
</td>
<td>
$8,194.55
</td>
</tr>
<tr>
<td>
<b>
Premiums: </b>
</td>
<td>
$2,400.00
</td>
<td>
$3,100.00
</td>
<td>
$3,956.00
</td>
<td>
$3,956.00
</td>
</tr>
<tr>
<td>
<b>
Cost of Services: </b>
</td>
<td>
$1,575.00
</td>
<td>
$2,239.00
</td>
<td>
$2,983.00
</td>
<td>
$2,983.00
</td>
</tr>
<tr>
<td>
<b>
Cost of Medications: </b>
</td>
<td>
$797.32
</td>
<td>
$927.32
</td>
<td>
$1,198.46
</td>
<td>
$1,198.46
</td>
</tr>
<tr>
<td>
</td>
<td colspan="4">
</td>
</tr>
<tr>
<td>
<b>
Individual Deductible: </b>
</td>
<td>
$3,350.00
</td>
<td>
$3,850.00
</td>
<td>
$4,250.00
</td>
<td>
$4,250.00
</td>
</tr>
<tr>
<td>
<b>
Individual Out of Pocket Maximum: </b>
</td>
<td>
$6,350.00
</td>
<td>
$6,850.00
</td>
<td>
$7,050.00
</td>
<td>
$7,050.00
</td>
</tr>
<tr>
<td>
<b>
Family Deductible: </b>
</td>
<td>
$6,650.00
</td>
<td>
$6,950.00
</td>
<td>
$7,200.00
</td>
<td>
$7,200.00
</td>
</tr>
<tr>
<td>
<b>
Family Out of Pocket Maximum: </b>
</td>
<td>
$12,900.00
</td>
<td>
$13,900.00
</td>
<td>
$15,400.00
</td>
<td>
$15,400.00
</td>
</tr>
<tr>
<td>
<b>
Coinsurance: </b>
</td>
<td>
20%
</td>
<td>
20%
</td>
<td>
30%
</td>
<td>
30%
</td>
</tr>
<tr>
<td>
<b>
Copayment: </b>
</td>
<td>
$25.00
</td>
<td>
$30.00
</td>
<td>
$40.00
</td>
<td>
$40.00
</td>
</tr>
<tr>
<td>
<b>
Pharmacy Generic: </b>
</td>
<td>
$20.00
</td>
<td>
$35.00
</td>
<td>
$45.00
</td>
<td>
$45.00
</td>
</tr>
<tr>
<td>
<b>
Pharmacy Brand: </b>
</td>
<td>
$40.00
</td>
<td>
$45.00
</td>
<td>
$60.00
</td>
<td>
$60.00
</td>
</tr>
<tr>
<td>
<b>
Pharmacy Non Preferred: </b>
</td>
<td>
$60.00
</td>
<td>
$70.00
</td>
<td>
$80.00
</td>
<td>
$80.00
</td>
</tr>
<tr>
<td>
<b>
Mail Order Generic: </b>
</td>
<td>
$60.00
</td>
<td>
$80.00
</td>
<td>
$90.00
</td>
<td>
$90.00
</td>
</tr>
<tr>
<td>
<b>
Mail Order Brand: </b>
</td>
<td>
$80.00
</td>
<td>
$90.00
</td>
<td>
$100.00
</td>
<td>
$100.00
</td>
</tr>
<tr>
<td>
<b>
Mail Order Non Preferred: </b>
</td>
<td>
$120.00
</td>
<td>
$140.00
</td>
<td>
$175.00
</td>
<td>
$175.00
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Answer 1

For even use
table tr td:nth-child(even)
And for odd use
table tr td:nth-child(odd)
Moreover, always prefer to use the exact descendants you want to apply your css on to avoid any invalid html markup to be selected by your stylesheets.

Answer 2

https://jsfiddle.net/1b329d8u/2/ is what I was trying to achieve.
table.sidebyside {
width: 800px;
overflow-x: scroll;
}
.sidebyside th:nth-child(1), .sidebyside td:nth-child(1) {
width: 300px !important;
position:absolute;
}
.sidebyside th:nth-child(2), .sidebyside td:nth-child(2) {
padding-left: 300px !important;
}
.sidebyside th {
background-color: #4b91ea;
height: 63px;
}
.sidebyside tr:nth-child(even) > td:nth-child(1) {
background-color: #fff;
}
.sidebyside tr:nth-child(odd) > td:nth-child(1) {
background-color: #f7fafa;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-12">
<div style="width:600px; overflow: auto;">
<table class="sidebyside table table-striped">
<tbody>
<tr>
<th></th>
<th>Bronze-High Deductible</th>
<th>Silver-HMO</th>
<th>Gold-PPO Low</th>
<th>Gold-PPO Med</th>
</tr>
<tr>
<td><b>Score: </b></td>
<td><span class="text-green">95 </span></td>
<td><span class="text-yellow">77 </span></td>
<td><span class="text-danger">32 </span></td>
<td><span class="text-danger">24 </span></td>
</tr>
<tr>
<td><b>RealCost: </b></td>
<td>$4,7772.32</td>
<td>$6,024.81</td>
<td>$8,194.55</td>
<td>$8,194.55</td>
</tr>
<tr>
<td><b>Premiums: </b></td>
<td>$2,400.00</td>
<td>$3,100.00</td>
<td>$3,956.00</td>
<td>$3,956.00</td>
</tr>
<tr>
<td><b>Cost of Services: </b></td>
<td>$1,575.00</td>
<td>$2,239.00</td>
<td>$2,983.00</td>
<td>$2,983.00</td>
</tr>
<tr>
<td><b>Cost of Medications: </b></td>
<td>$797.32</td>
<td>$927.32</td>
<td>$1,198.46</td>
<td>$1,198.46</td>
</tr>
<tr>
<td></td>
<td colspan="4"></td>
</tr>
<tr>
<td><b>Individual Deductible: </b></td>
<td>$3,350.00</td>
<td>$3,850.00</td>
<td>$4,250.00</td>
<td>$4,250.00</td>
</tr>
<tr>
<td><b>Individual Out of Pocket Maximum: </b></td>
<td>$6,350.00</td>
<td>$6,850.00</td>
<td>$7,050.00</td>
<td>$7,050.00</td>
</tr>
<tr>
<td><b>Family Deductible: </b></td>
<td>$6,650.00</td>
<td>$6,950.00</td>
<td>$7,200.00</td>
<td>$7,200.00</td>
</tr>
<tr>
<td><b>Family Out of Pocket Maximum: </b></td>
<td>$12,900.00</td>
<td>$13,900.00</td>
<td>$15,400.00</td>
<td>$15,400.00</td>
</tr>
<tr>
<td><b>Coinsurance: </b></td>
<td>20%</td>
<td>20%</td>
<td>30%</td>
<td>30%</td>
</tr>
<tr>
<td><b>Copayment: </b></td>
<td>$25.00</td>
<td>$30.00</td>
<td>$40.00</td>
<td>$40.00</td>
</tr>
<tr>
<td><b>Pharmacy Generic: </b></td>
<td>$20.00</td>
<td>$35.00</td>
<td>$45.00</td>
<td>$45.00</td>
</tr>
<tr>
<td><b>Pharmacy Brand: </b></td>
<td>$40.00</td>
<td>$45.00</td>
<td>$60.00</td>
<td>$60.00</td>
</tr>
<tr>
<td><b>Pharmacy Non Preferred: </b></td>
<td>$60.00</td>
<td>$70.00</td>
<td>$80.00</td>
<td>$80.00</td>
</tr>
<tr>
<td><b>Mail Order Generic: </b></td>
<td>$60.00</td>
<td>$80.00</td>
<td>$90.00</td>
<td>$90.00</td>
</tr>
<tr>
<td><b>Mail Order Brand: </b></td>
<td>$80.00</td>
<td>$90.00</td>
<td>$100.00</td>
<td>$100.00</td>
</tr>
<tr>
<td><b>Mail Order Non Preferred: </b></td>
<td>$120.00</td>
<td>$140.00</td>
<td>$175.00</td>
<td>$175.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Thanks #TylerH for the solution. I had to use tr:nth-child(even) > td:nth-child(1) so I could target the 1st column only and use (even) and (odd) at the tr level.