CODEWITHSUNDEEP
datatables
Aasim Azam
Aasim Azam

Reputation: 508

How to style cells within columns of dataTables?

I have made a table (with child rows) using jQuery plug in dataTables. I'm having trouble finding out how to apply a style to an individual column of cells (<td>)

I've made an edit to this existing fiddle as you can see I've made the text larger in column 2, but I also want to make the text larger (plus other styling) in column 4 and 5.

I put a class in line 114 in the CSS (this is the original css from dataTables) and this made the text bigger,

.sorting_1{
  font-size: 29px;
  line-height: 29px;
}

it didn't work for the other columns (as I assumed .sorting_2, .sorting_3 (etc) was the class to change it). When looking at the inspect panel you can see the <td> tag for the the changed cells all have the class of sorting_1, but the others don't and I'm not sure how to do that,

How would I do this?

Upvotes: 1

Views: 1260

Answers (1)

Steve K
Steve K

Reputation: 9055

Each row has the class of either even or odd so you could use nth-of-type to specify the td that you want to style and go from there. You would have to style both the even and odd column so you would have to specify both like so:

.even td:nth-of-type(4), 
.odd td:nth-of-type(4){
  background:red;
}
.even td:nth-of-type(5), 
.odd td:nth-of-type(5){
  font-size:20px;
}

Or you could specify it by the role attribute and use nth-of-type like so:

tr[role=row] td:nth-of-type(4){
  background:red;
}
tr[role=row] td:nth-of-type(5){
  font-size:20px;
}

Upvotes: 2

Related Questions