Q:

CSS - style  from 3rd row onwards

I have a HTML page which has records displayed using the <TABLE> 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..

Different header - Completed
Alternate row coloring - completed
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??

(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;
}

A:

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/

