Change the color of the rows alternatively using a Simple CSS in Oracle APEX IR & IG Reports

Here I am giving an example to change the color of the rows alternatively using a simple CSS in Oracle APEX Interactive Report & Interactive Grid.

Step 1: Create a new blank page.

Step 2: Create a new Interactive Report or Interactive Grid region to the page. (Whichever you want)

Step 3: Set Static Id for each report regions (Interactive Report & Interactive Grid).
     
Step 4: Add CSS to the page in inline CSS section. It will change the color of the rows alternatively.

For Interactive Grid:

#AlternateRowIG .a-GV-table tr:nth-child(even)  .a-GV-cell {
    background-color: lightgreen;
}
#AlternateRowIG .a-GV-table tr:nth-child(odd)  .a-GV-cell {
    background-color: lightyellow;
}

For Interactive Report:

#AlternateRowIR .a-IRR-table tr:nth-child(odd) td {
     background-color: #DBE5F1;
}

#AlternateRowIR .a-IRR-table tr:nth-child(even) td {
     background-color: white;
}

The demo is here.

That's it.

Happy APEXing!!!...

Comments

Post a Comment

Popular posts from this blog

Highlight the cell of Interactive Report based on Search Criteria in Oracle APEX

Querying Data From Flat Files in Oracle

Number of Tables by The Number of Rows in Oracle Database

Save Selected Interactive Grid Records into a Collection - Oracle APEX

Highlight Data That Meet Certain Criteria in Oracle APEX Report

Return a Validation Message using JavaScript if the Oracle Application Express Item is Empty

Remove X (Close Mark) from Oracle APEX Modal Dialog

Display User Rating Icons Dynamically in Oracle APEX Report

Printing Page Numbers in RTF Template [Oracle BI Publisher]

Find Where Specific Table or View is Used in Oracle Database