Conditional Formatting of Row Values in HTML Table

(0) Share

Report

Posted on by AkshayManke

Hi,

I have designed a flow which sends emails to the respective users with open items assigned to them.

The email is containing values from an HTML table. For table formatting I am using the below CSS code in a compose action. The table is having one day's column which is calculating the days after creating the item. I want to apply conditional formatting only to the day's column so that if the request is created within the last 7 days, then the font should be green, if between 8 to 30 days then the font should be orange and if more than 31 or 30 days the font should be red. I don't have knowledge of CSS or HTML so can anyone please help me how to achieve that?

Below the CSS Code I am using for styling.

<style>
table {
 border: 1px solid #1C6EA4;
 background-color: #EEEEEE;
 width: 100%;
 text-align: center;
 border-collapse: collapse;
}
table td, table th {
 border: 1px solid #AAAAAA;
 padding: 3px 2px;
}
table tbody td {
 font-size: 11px;
}
table thead {
 background: #d9291c;
 border-bottom: 2px solid #444444;
}
table thead th {
 font-size: 14px;
 font-weight: bold;
 color: #FFFFFF;
 border-left: 2px solid #D0E4F5;
}
table thead th:first-child {
 border-left: none;
}
</style>

Thanks and Regards,

Note: NO ChatGPT answers please. I have did that already.

Categories:

General topics

All responses (3)

Answers (1)

Sort by

abouchaalaBAIT 932 Moderator on at

Like
a
(0)

Report
Copy link

Link copied!

@AkshayManke
----------------------------------------------------------
If I have answered your question, please mark your post as Solved. 🆗✔️
If you like my response, please give it a Thumbs Up. 👍
You can accept more than one post as a solution.
AkshayManke 2 on at

Like
a
(0)

Report
Copy link

Link copied!

Attaching flow snaps as below for reference.
Verified answer

AkshayManke 2 on at

Like
a
(0)

Report
Copy link

Link copied!
Got the solution using expression. Below used in the 'Create HTML Table' action and got the expected results.

if( less( div(sub(ticks(utcNow()), ticks(item()?['DateColumn'])), 864000000000), -3 ), concat( '', div(sub(ticks(utcNow()), ticks(item()?['DateColumn'])), 864000000000), '' ), if( and( greaterOrEquals( div(sub(ticks(utcNow()), ticks(item()?['DateColumn'])), 864000000000), 1 ), lessOrEquals( div(sub(ticks(utcNow()), ticks(item()?['DateColumn'])), 864000000000), 7 ) ), concat( '', div(sub(ticks(utcNow()), ticks(item()?['DateColumn'])), 864000000000), '' ), if( and( greaterOrEquals( div(sub(ticks(utcNow()), ticks(item()?['DateColumn'])), 864000000000), 8 ), lessOrEquals( div(sub(ticks(utcNow()), ticks(item()?['DateColumn'])), 864000000000), 30 ) ), concat( '', div(sub(ticks(utcNow()), ticks(item()?['DateColumn'])), 864000000000), '' ), concat( '', div(sub(ticks(utcNow()), ticks(item()?['DateColumn'])), 864000000000), '' ) ) ) )