CODEWITHSUNDEEP
htmlcsscss-selectors
adixia duchannes
adixia duchannes

Reputation: 71

How to color a specific amount of rows from a table?

<style>     
    #font{
        font-size: 20px;
        color:#0000cd;
    }
    tr:nth-child(n+7) {
        background-color: #d3d3d3;
    }                  
    table {
       border-spacing: 0;
    }
</style>

How do I color only a specific number of rows? here only the first 7 lines of my display is white and the rest grey. i want 7 lines white, 7 grey, 7 white, 7 grey and so on...

Upvotes: 3

Views: 98

Answers (1)

Temani Afif
Temani Afif

Reputation: 272937

You may try something like this:

.table>span {
  height: 20px;
  width: 20px;
  display: inline-block;
  background: red;
}

.table>span:nth-child(14n + 1),
.table>span:nth-child(14n + 2),
.table>span:nth-child(14n + 3),
.table>span:nth-child(14n + 4),
.table>span:nth-child(14n + 5),
.table>span:nth-child(14n + 6),
.table>span:nth-child(14n + 7) {
  background: blue;
}
<div class="table">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Upvotes: 4

Related Questions