I’ve been trying to add a different colour to every n-th row. but when I added :nth-child property It gets applied to columns instead of rows. I have tried many solutions but none seem to work and I can’t find the solution online either. Any answers would be much appreciated
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;
}
here’s my css code
<table>
<thead>
<tr >
<th>S.no</th>
<th>Visiter 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>
and here’s the HTML
I tried changing the tbody and tr and setting the styling to them, but to no avail. I want them to apply to every even-th row instead of column