How to Fix Power Automate HTML Table Column Widths Ignored in Outlook
Question details
The user needs a way to enforce HTML table column widths generated by a Power Automate flow so they display correctly in Microsoft Outlook emails.
- Product
- Microsoft Power Automate and Outlook
- Device & OS
- not provided
- Scenario
- Creating an automated flow that extracts data from SharePoint and sends it as a formatted HTML table via an Outlook email.
- Observed behavior
- Outlook ignores percentage-based CSS column widths and custom web styling, causing the HTML table layout to distort, even though it renders perfectly in a standard web browser.
Familiarize yourself with basic inline CSS styling and HTML table structures. Since Outlook uses a Word-based rendering engine, it is highly recommended to send test emails to a desktop Outlook client before publishing your flow.
Use Inline CSS with Fixed Table Layout
This is the most reliable method for controlling table widths in Outlook, avoiding standard percentage-based CSS which Outlook often ignores.
Outlook's rendering engine does not process external style sheets or percentage-based widths effectively. By explicitly declaring a fixed table layout and assigning fixed pixel widths directly to your HTML elements, you force Outlook to respect your design.
Navigate to the flow where you generate the HTML table from your SharePoint data and click 'Edit'.
Immediately after the 'Create HTML table' action, add a 'Compose' action. Inside the inputs, define your inline CSS. For example: <style>table { table-layout: fixed; width: 100%; border-collapse: collapse; } th, td { width: 150px; border: 1px solid black; }</style>
In the same 'Compose' action, place the 'Output' dynamic content from the previous 'Create HTML table' step directly below the closing </style> tag.
Go to your 'Send an email' action. Switch the body format to HTML code view (</>), and replace the old table dynamic content with the Output from your new 'Compose' action.
Use Outlook-Specific VML or Conditional Formatting
Apply Microsoft Office specific code tags to target Outlook directly without affecting how the email looks in web-based clients.
Format and Share Tables Effortlessly with WPS Office
Tired of troubleshooting complex HTML rendering issues between Microsoft Power Automate and Outlook? Simplify your workflow with WPS Office. As a powerful, lightweight suite, it lets you format data effortlessly and export tables into widely supported formats like PDF or image, ensuring your recipients always see exactly what you designed.
- 1. Download WPS Office: Get the free WPS Office suite from the official website and install it on your device.
- 2. Create your data table: Open WPS Spreadsheet, paste your data, and visually adjust column widths using intuitive drag-and-drop tools.
- 3. Share with guaranteed formatting: Export your polished table as a PDF or image and attach it to your emails, bypassing Outlook's unpredictable HTML rendering entirely.
Frequently Asked Questions
Why does Outlook ignore standard CSS styling in HTML tables?
Desktop versions of Microsoft Outlook use Microsoft Word's HTML rendering engine instead of a standard web browser engine. This engine does not fully support modern CSS standards, including external stylesheets and percentage-based width definitions, causing layout issues.
Can I use CSS classes inside my Power Automate HTML table?
While you can inject CSS classes, Outlook will likely ignore them if they are defined in an external stylesheet or a <style> block that uses unsupported properties. It is highly recommended to use inline CSS (styles applied directly to the HTML tags) for the best compatibility.
How can I easily inject inline CSS into a Power Automate table?
You can use a 'Compose' action to prepend a <style> block with your CSS before the HTML table output. Alternatively, you can use the replace() function in a 'Compose' action to target <th> and <td> tags in your generated table and replace them with tags containing specific inline style="width:150px;" attributes.
Does this rendering issue happen in Outlook on the web?
No, Outlook on the web and the Outlook mobile apps typically use standard browser rendering engines (like WebKit or Blink), meaning percentage-based widths and standard CSS usually display correctly there. The issue primarily affects Outlook desktop clients for Windows.
