Style for multiple HTML Tables for email

(0) Share

Report

Posted on by Community Power Pla...

Hi,

I have an email that has multiple different HTML tables in.

I have the following style added to each of them (copied from an online tutorial and edited to be what i would like)...

But, I tried to adapte without success,

I trie to have all tables (max 4) with the same style,

Each table has 5 columns

First column has to be larger than the other 4 (for all tables)

The second bit more larger than the Third one.

The fourth and fith equals,

So I want to adapt myself and fixed for larger

I tried many proposition but each time without success,

Could you help me on this ?

My code just below :

Regards

Categories:

Building flows

I have the same question (0)

All responses (3)

Answers (2)

Verified answer

v-wenjuan-msft Microsoft Employee on at

Like (0)

Report
Hi @Anonymous ,

Please try this:
You can change proportion of each column to adjust their width.

<!DOCTYPE html> <html> <style> table, th, td { border:1px solid black; border-collapse: collapse; } </style> <body> <h2>Set columns to fixed proportion of the table width</h2> <table style="width:100%"> <tr> <th style="width:30%">Firstname</th> <th style="width:25%">Lastname</th> <th style="width:23%">Age</th> <th style="width:11%">Gender</th> <th style="width:11%">Region</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td>1</td> <td>2</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> <td>1</td> <td>2</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> <td>1</td> <td>2</td> </tr> </table> </body> </html>

It will display like this:

Here's a useful tool for your reference:
W3Schools Tryit Editor
HTML Table Sizes (w3schools.com)

Community Support Team _ Wenjuan Zou
If this post helps, then please consider Accept it as the solution to help the other members find it.

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

Hi @v-wenjuan-msft,

Sorry but it's not working because i forgot to explain that I have an select action with HTML Table and the style is include in "Compose Step"
In my situation I have several HTML Table with many differents rows,
The Compose step is applied to all my HTML table

I just want to include in my "Compose" step, the possibility to adjust my column width, that will impact all my HTML Table as well all the rows

Do you need more information ?
Thanks a lot for your proposal and your help 🙂

Regards

Was this reply helpful? Yes No
Verified answer

v-wenjuan-msft Microsoft Employee on at

Like (1)

Report

Hi @Anonymous ,

Content in your compose will not make impact on any of your HTML table built above as you don't refer them into the compose.

I make a demo based on my above solution for your reference:

and here is my result displayed in email:

Hope this helps.
Community Support Team _ Wenjuan Zou
If this post helps, then please consider Accept it as the solution to help the other members find it.

Was this reply helpful? Yes No