
Announcements
Hello Experts
Created a notification email and I ran into the below issue. I am using HTML (see below example). Can't figure out how to align items with yellow arrows. The pink arrow is fine.
Hi @thejdofva , thank you for your post!
Whilst you are using Flow, your issue is definitely more of an HTML/CSS issue that relates to formating tables within what looks like the body of an HTML email.
Would the first example on this post be the beginnings of a better approach perhaps?
https://html5-tutorial.net/tables/changing-column-width/
https://html5-tutorial.net/try.html#pre0
Also, it is possible to incorporate the full HTML layout within the email so you get a Head and Body section meaning you can style the table. So, you could have ...
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
text-align: center;
}
td, th {
border: 1px solid #ddd;
padding: 4px;
}
th {
padding-top: 8px;
padding-bottom: 8px;
background-color: #7F7D7E;
color: white;
font-weight: normal;
}
</style>
</head>
<body>
<!-- content goes here -->
</body>
</html>
and within ...
<body> <!-- content goes here --> </body>
Your table would be here and styled from above.
<table border="1" width="100%"> <col style="width:40%"> <col style="width:30%"> <col style="width:30%"> <thead> <tr> <th>Fruits</th> <th>Vitamin A</th> <th>Vitamin C</th> </tr> </thead> <tbody> <tr> <th>Apples</th> <td>98 ui</td> <td>8.4 mg</td> </tr> <tr> <th>Oranges</th> <td>295 ui</td> <td>69.7 mg</td> </tr> <tr> <th>Bananas</th> <td>76 ui</td> <td>10.3 mg</td> </tr> </tbody> </table>
This approach should make it easier for you to style the table in the way you wish and advoid sizing and line issues that you are deomonstrating. Whilst this isn't the exact HTML or CSS you will need this would generally how you would start of if you have the need to use an HTML table.
If you have found my post helpful, please mark thumbs up.
Any other questions, just ask.
Thanks, Alan