web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Automate / Change headings vertic...
Power Automate
Unanswered

Change headings vertical view from horizontal in HTML

(0) ShareShare
ReportReport
Posted on by 50

In my power Automate flow I have used a HTML format to display the records in table format. But in that table the headings are displayed in horizontal manner which I need to modify in vertical manner.

 

I tried but couldn't be able to achieve it, so can anyone help me in this. I am pasting the HTML code below and output.

 

HTML Code:

<style>
table {
border: 1px solid #1C6EA4;
background-color: #EEEEEE;
width: 80%;
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: #1C6EA4;
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>

 

Output: -

Rajath_0-1678100240152.png

I need to display these headings in vertical manner without changing colors and font size.

Categories:
I have the same question (0)
  • v-chengfen-msft Profile Picture
    on at

    Hi @Rajath ï¼Œ

    Please try:

    table {
    border: 1px solid #1C6EA4;
    background-color: #EEEEEE;
    width: 80%;
    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: #1C6EA4;
    border-bottom: 2px solid #444444;
    }
    table thead th {
    font-size: 15px;
    font-weight: bold;
    color: #FFFFFF;
    border-left: 2px solid #D0E4F5;
    writing-mode: vertical-rl; /* Add this line to display headings vertically */

    }
    table thead th:first-child {
    border-left: none;
    }

    Here is result:

    vchengfenmsft_0-1678158284425.png

     

     

    Best Regards

    Cheng Feng

  • Rajath Krishna S Profile Picture
    50 on at

    Hi @v-chengfen-msft 

    Thank for your suggesting the solution but in your result company, contact & country is in horizontal mannner but I want the headings in vertical manner. Hope you got that but anyway I'm attaching the example for better clarity.

     

    Rajath_0-1678174815102.png

    I want a table like this where the columns are at left and values are at right.

  • Verified answer
    v-chengfen-msft Profile Picture
    on at

    Hi @Rajath ,

    Did you use the [Create a Html table] action to create the html table?
    If it is, it will not be possible to modify the format of the table data filling by changing the Css style.
    Here it is recommended to write data into custom html table by splicing strings into html table:
    I use sharepoint as the data source here

    vchengfenmsft_0-1678175772196.png

     

    vchengfenmsft_2-1678175859992.png

    vchengfenmsft_3-1678175911352.png

    vchengfenmsft_4-1678175937258.png

    vchengfenmsft_5-1678176065031.png

    vchengfenmsft_6-1678176125275.png

     

    Here is result:

    (There is a difference in time here. There is a time difference between sharepoint and power automate, not a data problem.)

    vchengfenmsft_1-1678175811917.png

     

     

    Best Regards

    Cheng Feng

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

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Leaderboard > Power Automate

#1
Michael E. Gernaey Profile Picture

Michael E. Gernaey 538 Super User 2025 Season 2

#2
Tomac Profile Picture

Tomac 405 Moderator

#3
abm abm Profile Picture

abm abm 252 Most Valuable Professional

Last 30 days Overall leaderboard