Alternate colour columns in dynamically generated divs table

Question

I am looking to alternate div table columns (not row) example column 1 red... column 2 blue etc..

.divTable{
        display: table;
        width: 100.0%;
    }
    .divTableRow {
        display: table-row;
    }
    
    .divTableCell{
        background-color: #F7F8F8;
        border-bottom: 1px solid #CCCCCC;
        display: table-cell;
        padding-top: 25px !important;
        padding-bottom: 18px !important;
    }
    
    .divTableHead{
        border-bottom: 1px solid #CCCCCC;
        display: table-cell;
        padding: 1px 1px;
    }
    .divTable h3{color: #376d1b;}
    .divTableHeading, .divTableBody, .divTableFoot, .divTableRow{
       clear: both;
    }
    .divTableHeading{
        background-color: #000;
        display: table-header-group;
        font-weight: bold;
    
        border-radius: 0;
        background-color: black;
        color: white;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -o-border-radius: 0;
        border: 0;
        
        text-transform: uppercase;
    }
    .divTableFoot {
        background-color: #EEE;
        display: table-footer-group;
        font-weight: bold;
    }
    .divTableBody {
        display: table-row-group;
    }

    <div class="divTable">
    <div class="divTableHeading">
    <div class="divTableRow">
    <div class="divTableHead">#</div>
    <div class="divTableHead">col_red</div>
    <div class="divTableHead">col_blue</div>
    <div class="divTableHead blue">col_green</div>
    <div class="divTableHead green">col_yellow</div>
    </div>
    </div>
    <div class="divTableBody">
    <div class='divTableRow'>
    <div class='divTableCell'>1(4)</div>
    <div class='divTableCell'>record</div>
    <div class='divTableCell'>fail</div>
    <div class='divTableCell'>return</div>
    <div class='divTableCell'>fail</div>
    </div>
    </div>
    </div>

Does this answer your question? [Alternate table row color using CSS?](https://stackoverflow.com/questions/3084261/alternate-table-row-color-using-css) — Nico Haase, Aug 10 '21 at 05:46
If the linked question does not help: what's your problem? You haven't posted any specific question — Nico Haase, Aug 10 '21 at 05:46

score 1 · Answer 1 · answered Aug 10 '21 at 05:48

You need to use .divTableRow :nth-child(2) {background: red} to make the 2'nd column red, you can do this for all your columns.

.divTable {
  display: table;
  width: 100.0%;
}

.divTableRow {
  display: table-row;
}

.divTableCell {
  background-color: #F7F8F8;
  border-bottom: 1px solid #CCCCCC;
  display: table-cell;
  padding-top: 25px !important;
  padding-bottom: 18px !important;
}

.divTableHead {
  border-bottom: 1px solid #CCCCCC;
  display: table-cell;
  padding: 1px 1px;
}

.divTable h3 {
  color: #376d1b;
}

.divTableHeading,
.divTableBody,
.divTableFoot,
.divTableRow {
  clear: both;
}

.divTableHeading {
  background-color: #000;
  display: table-header-group;
  font-weight: bold;
  border-radius: 0;
  background-color: black;
  color: white;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -o-border-radius: 0;
  border: 0;
  text-transform: uppercase;
}

.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}

.divTableBody {
  display: table-row-group;
}

.divTableRow :nth-child(2) {background: red}
.divTableRow :nth-child(3) {background: blue}
.divTableRow :nth-child(4) {background: green}
.divTableRow :nth-child(5) {background: yellow}

<div class="divTable">
  <div class="divTableHeading">
    <div class="divTableRow">
      <div class="divTableHead">#</div>
      <div class="divTableHead">col_red</div>
      <div class="divTableHead">col_blue</div>
      <div class="divTableHead blue">col_green</div>
      <div class="divTableHead green">col_yellow</div>
    </div>
  </div>
  <div class="divTableBody">
    <div class='divTableRow'>
      <div class='divTableCell'>1(4)</div>
      <div class='divTableCell'>record</div>
      <div class='divTableCell'>fail</div>
      <div class='divTableCell'>return</div>
      <div class='divTableCell'>fail</div>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Aug 10 '21 at 05:51

You can use nth child https://www.w3.org/Style/Examples/007/evenodd.en.html

.divTableHead:nth-child(2n+3) {
    background: hotpink;
}

The same works for table columns, too, but then there has to be an element in the document that corresponds to the column. HTML provides COL for that. The table has to start with one COL for every column:

.divTableHead:nth-child(2n+3) {
background: hotpink;
}


 .divTable {
 display: table;
 width: 100.0%;
 }
 
 .divTableRow {
 display: table-row;
 }
 
 .divTableCell {
 background-color: #F7F8F8;
 border-bottom: 1px solid #CCCCCC;
 display: table-cell;
 padding-top: 25px !important;
 padding-bottom: 18px !important;
 }
 
 .divTableHead {
 border-bottom: 1px solid #CCCCCC;
 display: table-cell;
 padding: 1px 1px;
 }
 
 .divTable h3 {
 color: #376d1b;
 }
 
 .divTableHeading,
 .divTableBody,
 .divTableFoot,
 .divTableRow {
 clear: both;
 }
 
 .divTableHeading {
 background-color: #000;
 display: table-header-group;
 font-weight: bold;
 border-radius: 0;
 background-color: black;
 color: white;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 -o-border-radius: 0;
 border: 0;
 text-transform: uppercase;
 }
 
 .divTableFoot {
 background-color: #EEE;
 display: table-footer-group;
 font-weight: bold;
 }
 
 .divTableBody {
 display: table-row-group;
 }

<div class="divTable">
  <div class="divTableHeading">
<div class="divTableRow">
  <div class="divTableHead">#</div>
  <div class="divTableHead">col_red</div>
  <div class="divTableHead">col_blue</div>
  <div class="divTableHead blue">col_green</div>
  <div class="divTableHead green">col_yellow</div>
</div>
  </div>
  <div class="divTableBody">
<div class='divTableRow'>
  <div class='divTableCell'>1(4)</div>
  <div class='divTableCell'>record</div>
  <div class='divTableCell'>fail</div>
  <div class='divTableCell'>return</div>
  <div class='divTableCell'>fail</div>
</div>
  </div>
</div>

score 0 · Answer 3 · answered Aug 10 '21 at 05:51

Try using nth-child():

.divTable{
        display: table;
        width: 100.0%;
    }
    .divTableRow {
        display: table-row;
    }
    
    .divTableCell{
        background-color: #F7F8F8;
        border-bottom: 1px solid #CCCCCC;
        display: table-cell;
        padding-top: 25px !important;
        padding-bottom: 18px !important;
    }
    
    .divTableHead{
        border-bottom: 1px solid #CCCCCC;
        display: table-cell;
        padding: 1px 1px;
    }
    .divTable h3{color: #376d1b;}
    .divTableHeading, .divTableBody, .divTableFoot, .divTableRow{
       clear: both;
    }
    .divTableHeading{
        background-color: #000;
        display: table-header-group;
        font-weight: bold;
    
        border-radius: 0;
        background-color: black;
        color: white;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -o-border-radius: 0;
        border: 0;
        
        text-transform: uppercase;
    }
    .divTableFoot {
        background-color: #EEE;
        display: table-footer-group;
        font-weight: bold;
    }
    .divTableBody {
        display: table-row-group;
    }
    .divTableCell:nth-child(5n){
    background: yellow;
    }
    
    .divTableCell:nth-child(5n+1){
      background: red;
    }
    
    .divTableCell:nth-child(5n+2){
        background: blue;

    }
    .divTableCell:nth-child(5n+3){
        background: orange;

    }
    .divTableCell:nth-child(5n+4){
        background: green;

    }

<div class="divTable">
    <div class="divTableHeading">
    <div class="divTableRow">
    <div class="divTableHead">#</div>
    <div class="divTableHead">col_red</div>
    <div class="divTableHead">col_blue</div>
    <div class="divTableHead blue">col_green</div>
    <div class="divTableHead green">col_yellow</div>
    </div>
    </div>
    <div class="divTableBody">
    <div class='divTableRow'>
    <div class='divTableCell'>1(4)</div>
    <div class='divTableCell'>record</div>
    <div class='divTableCell'>fail</div>
    <div class='divTableCell'>return</div>
    <div class='divTableCell'>fail</div>
    </div>
    </div>
    </div>

score 0 · Answer 4 · answered Aug 10 '21 at 05:54

0

.divTableCell:nth-child(odd) {background-color: #f2f2f2;}

This will alternate color the odd columns. You can set both even and odd for different colors in columns.

answered Aug 10 '21 at 05:54

Rakib Uddin

880
1
6
17

Alternate colour columns in dynamically generated divs table

4 Answers4