I've been attempting to assign a unique color to every nth row, but my efforts with the :nth-child property are affecting columns instead of rows. Despite trying various solutions and scouring the internet for answers, I have yet to find a successful resolution. Any input on this matter would be greatly appreciated.
https://i.sstatic.net/L4eUgtdr.png
I've experimented with adjusting the tbody and tr elements and applying styles to them, but unfortunately, my attempts have been fruitless. My goal is to style every even-numbered row, rather than every column.
table,
thead,
tbody {
width: 100%;
}
table {
border: 2px solid black;
border-collapse: collapse;
overflow: auto;
}
tr {
display: flex;
justify-content: center;
}
th {
background-color: darkgray;
width: 16.7%;
text-align: center;
border: 1px solid black;
padding: 5px;
}
td {
width: 16.7%;
text-align: center;
border: 1px solid black;
padding: 5px;
}
tbody {
display: table;
}
tbody tr :nth-child(odd) {
background-color: #222831;
}
tbody tr :nth-child(even) {
background-color: #31363F;
}<table>
<thead>
<tr>
<th>S.no</th>
<th>Visitor name</th>
<th>Patient name</th>
<th>reason</th>
<th>enter time</th>
<th>leave time</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Guy 1</td>
<td>Guy 2</td>
<td>example</td>
<td>12:00am</td>
<td>1:30pm</td>
</tr>
<tr>
<td>1</td>
<td>Guy 1</td>
<td>Guy 2</td>
<td>example</td>
<td>12:00am</td>
<td>1:30pm</td>
</tr>
</tbody>
</table>