Html Question posted in
Some basic documentation can be found here.

Tricky CSS for an HTML Table Background

I’ve been playing with the CSS for a table, trying to affect cell fill background colors. I’ve gotten really close to what I need, but am stuck on one cell.

Top row and left column need to be red. Done. Right column needs to be blue. Done – except the top right cell is red from the 1st row CSS. That’s where the problem is.

How can I also get the top row last column cell to have the blue background without affecting the rest of the first row?

Thank you!

Here’s my CSS:

 /* changes table's first row and column background colors */
.custom-table tr:first-child td{
    background-color: #9e172d !important;
}
.custom-table td:first-child{
    background-color: #9e172d !important;
}

.custom-table td:nth-child(4) {
  background-color: #3870e2 !important;
}
Tags:

2

Answers


  1. 0

    This selector:

    .custom-table tr:first-child td

    Has more specificity than this one:

    .custom-table td:nth-child(4)

    One option could be to add another, more specific selector for your third rule (for the blue color) specifically for the case of the top-row element in that column. For example:

    .custom-table td:nth-child(4),
.custom-table tr:first-child td:nth-child(4) {
  background-color: #3870e2 !important;
}
    Login or Signup to reply.
  2. 0

    I’ll demonstrate using a simple code snippet:

    body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

.custom-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
}

.custom-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
}

/* First row styling (excluding last column) */
.custom-table tr:first-child td:not(:last-child) {
  background-color: #9e172d !important;
  color: white;
}

/* First column styling */
.custom-table td:first-child {
  background-color: #9e172d !important;
  color: white;
}

/* Last column styling */
.custom-table td:last-child {
  background-color: #3870e2 !important;
  color: white;
}

h1 {
  text-align: center;
  color: #333;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Styling Demo</title>
</head>
<body>
    <h1>Table Styling Demo</h1>
    <table class="custom-table">
        <tr>
            <td>Header 1</td>
            <td>Header 2</td>
            <td>Header 3</td>
            <td>Header 4</td>
        </tr>
        <tr>
            <td>Row 1, Col 1</td>
            <td>Row 1, Col 2</td>
            <td>Row 1, Col 3</td>
            <td>Row 1, Col 4</td>
        </tr>
        <tr>
            <td>Row 2, Col 1</td>
            <td>Row 2, Col 2</td>
            <td>Row 2, Col 3</td>
            <td>Row 2, Col 4</td>
        </tr>
        <tr>
            <td>Row 3, Col 1</td>
            <td>Row 3, Col 2</td>
            <td>Row 3, Col 3</td>
            <td>Row 3, Col 4</td>
        </tr>
    </table>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search