50
Views
8
Comments
Solved
Alternating color for rows in a table

Hello, I need to create a table in ODC with the color of the row that alternate between white and gray, I know that is a CSS thing, but i can't find the proper one.
Thank you for your help.


-Gabriele 

2024-04-08 12-58-25
Shady Mansour
Solution

Hi  @Gabriele Pastore 

below I mention the CSS code you need to put it in screen style sheet ,  then you need to use the following statement   

>>  If(Mod(GetEmployees.List.CurrentRowNumber, 2) = 0, "even-row", "odd-row")

in the style classes for every row cell you want to apply that condition.

Note:

 GetEmployees.List.CurrentRow Number  is the aggregate name linked to your table 


CSS Code:

-------------------------------------------------------------------------------------

.table tr:nth-child(even) {

     background-color: #b1d7fd; /* light gray */

}

.even-row, .odd-row { 

    background-color: inherit !important;

}  

table tr:hover {

  background-color: #f39387 !important; /* Light blue on hover */

}

-------------------------------------------------------------------------------

UserImage.jpg
Gabriele Pastore

It worked, thank you for your help!

-Gabriele

2024-04-08 12-58-25
Shady Mansour

Welcome!

2026-01-28 16-57-48
Mihai Melencu
Champion

Hi Gabriele,

Would you like the row colors to change based on a condition, or should the table simply alternate colors between odd and even rows? 

UserImage.jpg
Gabriele Pastore

Hi Mihai,

just for odd and even rows.

-Gabriele

2026-01-28 16-57-48
Mihai Melencu
Champion

You can either use:

.table-row:nth-child(odd) td {  

background: grey;

}

or 

.table-row:nth-child(even) td {  

background: grey;

}

2025-07-28 06-45-20
Rupesh Patil

Hi @Gabriele Pastore 

You can use this CSS for Even:

.table-row:nth-child(even) td{

    background-color: #f2f2f2;

}

and for odd:

.table-row:nth-child(odd) td{

    background-color: #f2f2f2;

}

I hope this helps

Thanks

UserImage.jpg
Sowmya K

Hi Gabriele,
 you can apply this css. or style

.ListRecords div:nth-child(odd) {    background-color : aliceblue;}
.ListRecords div:nth-child(even) {    background-color : cornsilk;}

or 

2024-04-08 12-58-25
Shady Mansour
Solution

Hi  @Gabriele Pastore 

below I mention the CSS code you need to put it in screen style sheet ,  then you need to use the following statement   

>>  If(Mod(GetEmployees.List.CurrentRowNumber, 2) = 0, "even-row", "odd-row")

in the style classes for every row cell you want to apply that condition.

Note:

 GetEmployees.List.CurrentRow Number  is the aggregate name linked to your table 


CSS Code:

-------------------------------------------------------------------------------------

.table tr:nth-child(even) {

     background-color: #b1d7fd; /* light gray */

}

.even-row, .odd-row { 

    background-color: inherit !important;

}  

table tr:hover {

  background-color: #f39387 !important; /* Light blue on hover */

}

-------------------------------------------------------------------------------

UserImage.jpg
Gabriele Pastore

It worked, thank you for your help!

-Gabriele

2024-04-08 12-58-25
Shady Mansour

Welcome!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.