The inline style is not working when I tried to attached as e-mail content
Question
I just created simple html table and Opened in the browser which looks like below:
browser view: (Expected One)
HTML:
<html>
${imageHeader}
<body>
<div>
<br> ${suite}</b> For Daily Run : <br> <br>
<b>${exeDate}</b>. Kindly analyse the failures.
</div>
<br>
<table class="styled-table" style=" border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
width: 80%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
color: #ffffff;
text-align: center; padding: 5px 10px;border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;border-bottom: 1px solid #dddddd;overflow:hidden;">
<thead style="background-color: #009879;
color: #ffffff;
text-align: center;border-bottom: 1px solid #dddddd;height: 5px;
line-height: 10px;">
<tr style="
color: #ffffff;
text-align: center;border-bottom: 1px solid #dddddd; height:30%;">
<th style=" padding: 5px 10px; border-bottom: 1px solid #dddddd;border: 0.8px solid black;overflow:hidden;">S.NO</th>
<th style=" padding: 5px 10px; border-bottom: 1px solid #dddddd;border: 0.8px solid black;overflow:hidden;">TOTAL TEST CASES</th>
<th style=" padding: 5px 10px; border-bottom: 1px solid #dddddd;border: 0.8px solid black;overflow:hidden;">PASSED TEST CASES</th>
<th style=" padding: 5px 10px; border-bottom: 1px solid #dddddd;border: 0.8px solid black;overflow:hidden;">FAILED TEST CASES</th>
<th style=" padding: 5px 10px; border-bottom: 1px solid #dddddd;border: 0.8px solid black;overflow:hidden;">PASS PERCENTAGE(%)</th>
</tr>
</thead>
<tbody style="border-bottom: 1px solid #dddddd;border-bottom: 1px solid #dddddd;">
<tr style="color: #696969;text-align: center;border-bottom: 1px solid #dddddd;">
<td style="text-align:center;border-bottom: 1px solid #dddddd;border: 0.8px solid black; overflow:hidden;">01</td>
<td style="text-align:center;border-bottom: 1px solid #dddddd;border: 0.8px solid black; overflow:hidden;">450</td>
<td style="text-align:center;border-bottom: 1px solid #dddddd;border: 0.8px solid black;overflow:hidden;">300</td>
<td style="text-align:center;border-bottom: 1px solid #dddddd;border: 0.8px solid black;overflow:hidden;">150</td>
<td style="text-align:center;border-bottom: 1px solid #dddddd;border: 0.8px solid black;overflow:hidden;">80</td>
</tr>
<!-- and so on... -->
</tbody>
</table>
<div>
<br><br><b>QA Team</b>
</div>
</body>
</html>
I thought everything looks good and now I just want to use this html to embedded as email content to send the status to stakeholders.
After successfully integrated as e-mail content and the html looks like below:
HTML view as E-mail content: (Not Expected)
The table header is look huge in the e-mail content, but the same is looking good in the browser.
How can I reduce the size of header and make it that it looks like in the browser.
1 answers
solution1
0 ACCPTED 2022-03-27 21:16:29
You've got a height:30% on the <tr> that might be adding height.
You've also got padding, so remove that. Perhaps you want top and bottom 0, but left and right 5px so the words are not right up against each other. That would be: padding:0 5px on your <th>'s .
The final thing that can interfere is the line-height. Make sure your line-height is the same as the font-size if they're all always going to be on one line (check on a mobile too,). or otherwise set it about 4px higher than the font-size so it's not defaulting to something large, It's best to put the result. eg font-size:16px; line-height:20px font-size:16px; line-height:20px , on the <table style="..."> so everything under it inherits that (and I'm assuming you don't use other styles that override this, as it should all be inline).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.