I am currently working on a table that has sticky columns. I am trying to create alternating row colors in the first column only.
Below is the code for the table:
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th colspan="1"></th>
<th colspan="4"></th>
<th colspan="3" style="text-align: center">%Penetration</th>
</tr>
<tr>
<th scope="col">Action</th>
<th scope="col" *ngFor="let tableHeader of this.tableHeaders">
{{ tableHeader }}
</th>
</tr>
</thead>
<tbody>
th:first-child,
td:first-child {
margin-left: -1px;
position: sticky;
left: -1px;
}
td:first-child {
background-color: white;
}
I have attempted to apply alternating row colors using the following code:
td:first-child > td:nth-child(even){
background-color: blue;
}