CODEWITHSUNDEEP
css
Reacting
Reacting

Reputation: 6123

How to change background color of a table's tr and td?

This is the result I would like to get:

enter image description here

And this is what I am getting:enter image description here

And this is the code I have:

.chart-table {
    th, td {
        text-align: center;
        width: 25%;
    }

    tr:nth-child(even) > td  {
        background-color: $softer-beige;
    }

    tr:nth-child(odd) > td {
        background-color: $soft-beige;
    }
}

What am I doing wrong?

UPDATE

What I as asking here was very clear. If you don't know the answer, you don't have why to to downvote my question. Don't be that kind of person.

Upvotes: 0

Views: 1782

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

Well you actually need 3 colors and you need to use :nth-child on the td as well.

.chart-table{width:300px;height:300px;}
.chart-table th,
.chart-table td {
  text-align: center;
  width: 25%;
  background-color: #f5f5dc;
}

.chart-table tr:nth-child(even)> td:nth-child(odd),
.chart-table tr:nth-child(odd) > td:nth-child(even){
  background-color: #dcdcc6;
}

/*instersection of darker row and column*/
.chart-table tr:nth-child(even) > td:nth-child(even){
  background-color: #c4c4b0;
}
<table class="chart-table">
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
    <td>1.4</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
    <td>2.4</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
    <td>3.4</td>
  </tr>
  <tr>
    <td>4.1</td>
    <td>4.2</td>
    <td>4.3</td>
    <td>4.4</td>
  </tr>
  <tr>
    <td>5.1</td>
    <td>5.2</td>
    <td>5.3</td>
    <td>5.4</td>
  </tr>
  <tr>
    <td>6.1</td>
    <td>6.2</td>
    <td>6.3</td>
    <td>6.4</td>
  </tr>
</table>

Upvotes: 1

Related Questions