Trying to add some style to my table on the webpage by alternating row colors, but I'm running into some issues. I've followed tutorials and tried using different CSS selectors like nth-of-type(even), nth-of-type(2n+0), and nth-of-type(odd). However, instead of coloring alternate rows vertically, it's doing so horizontally. There seems to be a problem with my code but I can't quite pinpoint it. Any suggestions or insights would be greatly appreciated. Let me know if you need more code as this is part of a larger front and back-end system. Thanks!
Table Screenshot - https://i.stack.imgur.com/lJsTt.jpg (Issue with uploading image on Stack)
Below is the snippet of the relevant code:
.customer_table {
border-collapse:collapse;
margin-left:auto;
margin-right:auto;
margin-top: 50px;
font-size: 18px;
}
.customer_table thead tr {
background-color: #4cb59c;
text-align: left;
}
.customer_table th,
.customer_table td {
padding: 12px 15px;
}
.customer_table tbody tr {
border: 0.5px solid #16a583;
}
.customer_table tr :nth-of-type(even) {
background-color: #dcc79e;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table width="60%" class="customer_table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Phone</th>
<th>Email</th>
<th>Orders</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
</table>
</body>
</html>