cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
JB0007
Helper V
Helper V

Format HTML table individual columns

Hi Power Automate community,

 

I have a flow that get items from a SharePoint list and send an email with those items to a specific user.

 

JB0007_2-1632769549756.png    JB0007_3-1632769581010.png

 

In the Format Compose, I am using the CSS of Ryan Maclean in order to format the tables as below:

JB0007_1-1632769316503.png

The problem is that the tables are returned in different styles. For example, each table has a different column width and I want to prevent that. 

 

I don't know if there is a way that I can determine the columns width of the tables. For example, I want the Task Number shorter and the Task and Comments columns wider.

 

Can someone please help me? 

There are some columns that doesn't contain long sentences and I want to set a fixed width for those columns.

 

7 REPLIES 7
VJR
Multi Super User
Multi Super User

Hi @JB0007 

 

Are you able to set the width of the individual columns in the below section.

 

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

 

VJR_0-1632816972066.png

 

 

If not also please check the concept of n-th child.

https://stackoverflow.com/questions/40134586/how-to-set-different-column-in-table-to-be-different-wi...

Click on "Run code snippet" button under each of the answers given in the above link

Hi @VJR ,

 

Thank you for your feedback, I have tried the code but the table stayed the same:

 

JB0007_1-1632835004344.png

 

JB0007_2-1632835057514.png

 

Output:

JB0007_3-1632835102828.png

 

 

Hi @JB0007 

I am having the same issue - have you solve your issue on column width?

 

 

@Nestedune 

 

Yes, I have used the Select action and passed the HTML / CSS code for each data in the Select columns.

 

JB0007_0-1668078898966.png

 

That doesn't work. It only returns as text, not the intended formatting.

Thanks for this. @JB0007 
I have used the code that you have in the Select action, followed by these steps below. However, the HTML table has a gap between the two columns that are in my table. I think the issue is in the Clean HTML action. Would you be able to provide the code that you used in Clean HTML action and the Format HTML action? I think this is where my issue is.

GuMean_0-1698827984583.png

 

Clean HTML code:
replace(replace(replace(replace(replace(body('Create_HTML_table'), '&lt;', '<'), '&gt;', '>'), '&amp;', '&'), '&#39;', '"'), '&quot;', '"')

Format HTML code:
<style>
table {
  border: 1px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 60%;
  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: #24387F;
  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>

 

I think that you need to 'Clean' the HTML in the Create HTML table action.

Helpful resources

Announcements

Check out the Copilot Studio Cookbook today!

We are excited to announce our new Copilot Cookbook Gallery in the Copilot Studio Community. We can't wait for you to share your expertise and your experience!    Join us for an amazing opportunity where you'll be one of the first to contribute to the Copilot Cookbook—your ultimate guide to mastering Microsoft Copilot. Whether you're seeking inspiration or grappling with a challenge while crafting apps, you probably already know that Copilot Cookbook is your reliable assistant, offering a wealth of tips and tricks at your fingertips--and we want you to add your expertise. What can you "cook" up?   Click this link to get started: https://aka.ms/CS_Copilot_Cookbook_Gallery   Don't miss out on this exclusive opportunity to be one of the first in the Community to share your app creation journey with Copilot. We'll be announcing a Cookbook Challenge very soon and want to make sure you one of the first "cooks" in the kitchen.   Don't miss your moment--start submitting in the Copilot Cookbook Gallery today!     Thank you,  Engagement Team

Tuesday Tip | How to Report Spam in Our Community

It's time for another TUESDAY TIPS, your weekly connection with the most insightful tips and tricks that empower both newcomers and veterans in the Power Platform Community! Every Tuesday, we bring you a curated selection of the finest advice, distilled from the resources and tools in the Community. Whether you’re a seasoned member or just getting started, Tuesday Tips are the perfect compass guiding you across the dynamic landscape of the Power Platform Community.   As our community family expands each week, we revisit our essential tools, tips, and tricks to ensure you’re well-versed in the community’s pulse. Keep an eye on the News & Announcements for your weekly Tuesday Tips—you never know what you may learn!   Today's Tip: How to Report Spam in Our Community We strive to maintain a professional and helpful community, and part of that effort involves keeping our platform free of spam. If you encounter a post that you believe is spam, please follow these steps to report it: Locate the Post: Find the post in question within the community.Kebab Menu: Click on the "Kebab" menu | 3 Dots, on the top right of the post.Report Inappropriate Content: Select "Report Inappropriate Content" from the menu.Submit Report: Fill out any necessary details on the form and submit your report.   Our community team will review the report and take appropriate action to ensure our community remains a valuable resource for everyone.   Thank you for helping us keep the community clean and useful!

Users online (3,469)