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