After finding a code example online to assist with creating a table in my project, I am faced with the challenge of changing the background color of the white rows to match the dark blue used for others. Additionally, I cannot figure out how to change the text color to white so it is visible against the dark blue background. Any insights on what I may be missing?
.styled-tableBlue {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.styled-tableBlue thead tr {
background-color: #324655;
color: #ffffff;
text-align: left;
}
.styled-tableBlue th,
.styled-tableBlue td {
padding: 12px 15px;
}
.styled-tableBlue tbody tr {
border-bottom: 1px solid #152027;
}
.styled-tableBlue tbody tr:nth-of-type(even) {
background-color: #152027;
}
.styled-tableBlue tbody tr:last-of-type {
border-bottom: 2px solid #152027;
}
.styled-tableBlue tbody tr.active-row {
font-weight: bold;
color: #ff6600;
}<table class="styled-tableBlue">
<thead>
<tr>
<th>Installers</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><b> Download</b></td>
<td><b> Installer Name</b></td>
</tr>
<tr>
<td><img src="images/downloadArrow.png" width="20" height="20" alt="Download" /> </td>
<td>6000</td>
</tr>
<tr class="active-row">
<td>Download Btn Here</td>
<td>5150</td>
</tr>
<tr>
<td>Download Btn Here</td>
<td>7000</td>
</tr>
<tr>
<td>Download Btn Here</td>
<td>7000</td>
</tr>
<tr>
<td>Download Btn Here</td>
<td>7000</td>
</tr>
<tr>
<td>Download Btn Here</td>
<td>7000</td>
</tr>
<!-- and so on... -->
</tbody>
</table>