datatables jquery - alternate colors for the rows

Question

I have used datatables jquery in my application. When I used datatables jquery to set alternate colors for my rows, I faced a issue. That is, in a table 2nd,3rd,4th,5th n 6th row are all displayed in same color and after that colors are displayed alternately. Could anyone help me with this? Thanks in advance.

My code in jquery.datatables.css :

table.dataTable tr.odd { background-color:  red; }
table.dataTable tr.even { background-color: green;  }

I have attached the screenshot of the table.

enter image description here

When I checked, every row is having either class="even" or class="odd" but the 2nd,3rd,4th,5th,6th rows are having class="odd even". I dont know why it is like this.

score 5 · Accepted Answer · answered Jun 25 '13 at 11:20

5

Found the answer :

table.dataTable tr{ background-color:  red; }
table.dataTable tr:nth-child(even)  { background-color: green;  }

answered Jun 25 '13 at 11:20

kishore

1,587
4
15
17

score 2 · Answer 2 · answered Jun 25 '13 at 10:32

2

Try :odd and :even pseudo selecters

table.dataTable tr:odd { background-color:  red; }
table.dataTable tr:even { background-color: green;}

answered Jun 25 '13 at 10:32

Rohan Kumar

40,431
11
76
106

1

OP is using classes like `odd` and `even`, And I suggest the `css pseudos` – Rohan Kumar Jun 25 '13 at 10:36
Oh, my bad, sorry didn't saw that! +1 – A. Wolff Jun 25 '13 at 10:37

score 1 · Answer 3 · answered Jan 27 '14 at 09:58

1

In my app I have used

#tableid >  thead >tr  {background: #0F0}   /* to color thead*/


table.dataTable tr.odd { background-color:  red; }   /* tr. not tr: */
table.dataTable tr.even { background-color: green;}

as a css rule and it works. Hope the same works for your application .

answered Jan 27 '14 at 09:58

Konstantinos Chertouras

349
1
5
20

I noticed the same, DataTable add the class "odd" or "even" with all – Snow Sep 19 '17 at 08:04

score 0 · Answer 4 · answered Aug 04 '15 at 13:51

0

The following code should work . add those lines in datatable css file

table.dataTable >tbody td {
    text-align: center;
    background: #99BCDB;
}

table.dataTable > tbody tr.odd td { 
    background: #EBF2F8
;
}

answered Aug 04 '15 at 13:51

Narasimma

1
1

datatables jquery - alternate colors for the rows

4 Answers4