change the background color of the Table Row

ONLINECAST

2 min read

·

05-10-2024

7

0

Share

How to Change the Background Color of a Table Row with CSS

Problem: You've got a table filled with data, and you want to highlight specific rows by changing their background color. Maybe you want to emphasize important rows, or simply make the table easier to read.

Solution: CSS provides a simple and elegant way to change the background color of table rows. Let's explore how to achieve this using the :nth-child selector and the background-color property.

Scenario: Imagine you have a table displaying a list of products, and you want to highlight every other row for better readability.

Original Code:

<table>
  <tr>
    <th>Product Name</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Product A</td>
    <td>$10</td>
  </tr>
  <tr>
    <td>Product B</td>
    <td>$20</td>
  </tr>
  <tr>
    <td>Product C</td>
    <td>$30</td>
  </tr>
</table>

CSS Solution:

table tr:nth-child(even) {
  background-color: #f2f2f2; /* Light grey background */
}

Explanation:

• table tr:nth-child(even): This CSS selector targets every other row (even) within the table element.
• background-color: #f2f2f2: This sets the background color of the selected rows to a light grey color. You can, of course, use any color you desire.

More Options and Considerations:

• Highlighting Specific Rows: You can use the :nth-child selector to target specific rows. For example, table tr:nth-child(3) will highlight the third row.
• Using Classes: Instead of relying solely on :nth-child, you can add a class attribute to your table rows and target them with a dedicated CSS rule. This provides more control and flexibility.
• Alternative Approach: The :nth-of-type selector can be used to target specific rows based on their position within the table. However, it behaves differently compared to :nth-child and may not be suitable in all cases.

Example:

<table>
  <tr>
    <th>Product Name</th>
    <th>Price</th>
  </tr>
  <tr class="highlight">
    <td>Product A</td>
    <td>$10</td>
  </tr>
  <tr>
    <td>Product B</td>
    <td>$20</td>
  </tr>
  <tr class="highlight">
    <td>Product C</td>
    <td>$30</td>
  </tr>
</table>

table tr.highlight {
  background-color: #f2f2f2; /* Light grey background */
}

In this example, we use a "highlight" class to target specific rows.

Conclusion:

Changing the background color of table rows with CSS is a simple task. The :nth-child selector and the background-color property provide powerful tools to enhance the readability and visual appeal of your tables.