Skip to main content

Notifications

Community site session details

Community site session details

Session Id :
Power Automate - Building Flows
Answered

Beginner with CSS Trying to format HTML Table in Flow

Like (0) ShareShare
ReportReport
Posted on 21 Feb 2024 16:33:01 by 39

EDITED:

 

Hi Everyone,

 

Let me start by saying I'm a beginner in HTML table and CSS, so please speak plainly with any answers/ solutions :-).  I'm trying to create an HTML table that pulls data from an excel file and then apply CSS for formatting to the table to drop it into an email.  So far I've been able to get the data and convert it into a table.  However, I'm noticing the formatting is horrible and that rows with missing data are not being skipped, so I'm getting holes in my table. 

 

I'd like to:

-Skip rows that don't have data in the excel file so there are no holes in the HTML table

-add cell spacing

-add cell color

-add borders and collapse them

-how to put into power automate flow and link to HTML table

 

Not to big of an ask, right? lol

 

Attached image of the excel file I'm trying to mimic in HTML

  • CU08081706-0 Profile Picture
    on 22 Feb 2024 at 15:37:31
    Re: Beginner with CSS Trying to format HTML Table in Flow

    And Ninetails,

    Ivan is probably right. It occurred to me later that you may need to identify many rows that are blank and that would best be accomplished with JavaScript rather than CSS. Since Power Automate uses JSON (JavaScript Object Notation) this would be the way to go. As I am new to power automate you may need to ask which expression or function to use to accomplish this. I believe it would require an If statement such that If(rows are empty) apply class of anyname. (note that this is not correct syntax). Or there may be a better way. 

  • ivan_apps Profile Picture
    2,187 Super User 2025 Season 1 on 22 Feb 2024 at 00:26:41
    Re: Beginner with CSS Trying to format HTML Table in Flow

    Not knowing CSS too well, I would probably filter the data in first in Power Automate before it makes its way into the table. I wouldn’t rely on CSS to hide rows or skip rows but that’s simply because it’s not my strength.

  • CU08081706-0 Profile Picture
    on 21 Feb 2024 at 21:34:08
    Re: Beginner with CSS Trying to format HTML Table in Flow

    for the tr (table row) that you want to be different from the others your html will include:

    class = "anyname"

    and your CSS will be: 

    .anyname {

    display: none;

    }

  • Ninetails Profile Picture
    39 on 21 Feb 2024 at 20:51:52
    Re: Beginner with CSS Trying to format HTML Table in Flow

    HI @stharris ,

     

    So Ivan's solution worked for the formatting of the table and I was able to get it into power automate.  How would you suggest I alter the below CSS code to remove the empty rows?

     

    Code:

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

  • Ninetails Profile Picture
    39 on 21 Feb 2024 at 20:33:52
    Re: Beginner with CSS Trying to format HTML Table in Flow

    Hi Ivan,

     

    Your website was immensely helpful and allowed me to get the formatting into the email.  Would you happen to know what code I should use to skip a row if empty in the table?  Thank you!

     

     

  • CU08081706-0 Profile Picture
    on 21 Feb 2024 at 18:36:18
    Re: Beginner with CSS Trying to format HTML Table in Flow

    It will take CSS to skip empty rows. If you need help with CSS I can help. (I did some Frontend Dev for Websites).

    "Ivan apps" seems to have a good solution. 

    I would be interested in knowing what you come up with. I am new to Power Automate.

  • Ninetails Profile Picture
    39 on 21 Feb 2024 at 18:30:05
    Re: Beginner with CSS Trying to format HTML Table in Flow

    Hi @stharris,

     

    I've been using w3schools site to play with the CSS coding.  I guess I was clueless in regards to the specific issue regarding skipping empty rows in my HTML table, is this HTML coding or can it be accomplished with CSS?  Also, how to take the CSS code and put into a power automate flow and link it to the table, which I may have figured out, but still testing.

  • Verified answer
    ivan_apps Profile Picture
    2,187 Super User 2025 Season 1 on 21 Feb 2024 at 17:54:09
    Re: Beginner with CSS Trying to format HTML Table in Flow

    Yea I can’t help you mimic a styling, not that good at css myself. However I’ve used this method in my flows as well as the styling and it’s worked out pretty well, looking quite nice. Perhaps this helps you get started with a template and you just modify a couple css tags?

     

    https://ryanmaclean365.com/2020/01/29/power-automate-html-table-styling/

  • CU08081706-0 Profile Picture
    on 21 Feb 2024 at 17:40:15
    Re: Beginner with CSS Trying to format HTML Table in Flow

    A bit of an ask to actually write all of the CSS, but I can help. First, are you familiar with CSS Grid? I think this could be the best solution. Otherwise, you may want to use the old standard of TD= table data, TR = table row. etc.

     "subgrid" | Can I use... Support tables for HTML5, CSS3, etc 

    I generally look to W3schools or Mozilla Dev for Html and CSS answers. 

    https://www.w3schools.com/css/css_grid.asp ;  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid ; 

     

    you can set the background color of your cels with css as well. I can help you with the html css part

    but I can not answer this for you: "how and where to add this text into power automate and have it pull in the values from my excel file and enter"

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Understanding Microsoft Agents - Introductory Session

Confused about how agents work across the Microsoft ecosystem? Register today!

Warren Belz – Community Spotlight

We are honored to recognize Warren Belz as our May 2025 Community…

Congratulations to the April Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard > Power Automate - Building Flows

#1
stampcoin Profile Picture

stampcoin 81

#2
Michael E. Gernaey Profile Picture

Michael E. Gernaey 70 Super User 2025 Season 1

#3
David_MA Profile Picture

David_MA 48 Super User 2025 Season 1

Overall leaderboard