Answered

Change headings vertical view from horizontal in HTML

(0) Share

Report

Posted on by Rajath Krishna S

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:

Output: -

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

Categories:

General topics

I have the same question (0)

All responses (3)

Answers (1)

v-chengfen-msft Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!
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:

Best Regards
Cheng Feng

Was this reply helpful? Yes No
Rajath Krishna S 50 on at

Like (0)

Report
Copy link

Link copied!

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.

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

Was this reply helpful? Yes No
Verified answer

v-chengfen-msft Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!

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

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

Best Regards
Cheng Feng

Was this reply helpful? Yes No