Venu Venu - 1 month ago 6
CSS Question

CSS - style <TD> from 3rd row onwards

i have a HTML page which has records displayed using the format. formatting is controlled from CSS sheet (See below). i have 3 requirements and able to achieve first two, and for last one, need to know how to do it please..

1) Different header - Completed

2) Alternate row coloring - completed

3) fourth column from row #3, should have different background colour - i can get full column background colour changed, but not starting from 3rd row on wards.. any idea how to get this from CSS??

desired output
(attached image is what i want to achieve)



table.Event-table {
width:100%;
padding-left: 2px;
border: 1px solid #ddd;
}

/*border and text alignment*/
.Event-table tr td {
text-align:center ;
padding-left:10px;
border: 1px solid #ddd !important;
}

/*Alternte background colour*/
.Event-table tr:nth-child(2n+1) {background: #e7f7ff }
.Event-table tr:nth-child(2n+2) {background: #fff}


/*Header Row*/
.Event-table tr:nth-child(1) {
font-weight : bold;
text-align:center;
color: #000;
background-color : #d9edf7 ;
border : 1px solid #ddd !important;
}

/*Select forth column, but from second row onwards*/
.Event-table td:nth-child(4) {
background-color : #eab6f8;
}




Answer

Some thing like this? I took random smaller table from w3schools (edit to set correct column/row index for you).

table tr + tr + tr + tr td:nth-child(2) {
  background-color: red;
}

https://jsfiddle.net/2v3ahoeu/