Search code examples
htmlcsshtml-table

Changing table background and text color


I am using an example of code I found online to help me set up a table in my project. I would like to know how to change the background color of the white rows? I would like them to be the same dark blue I used on the others. I also do not see a way to change the text color to white so it can be seen over the dark blue... what am I 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>&nbsp;Download</b></td>
      <td><b>&nbsp;Installer Name</b></td>
    </tr>
    <tr>
      <td><img src="images/downloadArrow.png" width="20" height="20" alt="Download" />&nbsp;</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>


Solution

  • The white rows don't have the blue background color because of this rule:

    .styled-tableBlue tbody tr:nth-of-type(even) {
        background-color: #152027;
    }
    

    :nth-of-type(even) means that all even rows have that color. Removing it would make all of them blue. Setting the color property to white would make their text white as well.

    You can swap the above with:

    .styled-tableBlue tbody tr {
        background-color: #152027;
        color: white;
    }
    

    You can change the "white" text with #ffffff to be consistent or the short version #fff.