当我尝试附加为电子邮件内容时，内联样式不起作用

Question

I just created simple html table and Opened in the browser which looks like below:我刚刚创建了简单的 html 表并在浏览器中打开，如下所示：

browser view: (Expected One)浏览器视图：（预期的）

HTML: 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.我认为一切看起来都不错，现在我只想使用此 html 嵌入为 email 内容，以将状态发送给利益相关者。

After successfully integrated as e-mail content and the html looks like below:成功集成为电子邮件内容后，html 如下所示：

HTML view as E-mail content: (Not Expected) 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.表 header 在电子邮件内容中看起来很大，但在浏览器中看起来同样不错。

How can I reduce the size of header and make it that it looks like in the browser.我怎样才能减少 header 的大小并使其在浏览器中看起来像。

Answer 1

You've got a height:30% on the <tr> that might be adding height. <tr>上的 height:30% 可能会增加高度。

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.也许你想要 top 和 bottom 0，但是 left 和 right 5px 这样的话就不会相互对立。 That would be: padding:0 5px on your <th>'s .那将是： 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,).确保你的 line-height 与 font-size 相同，如果它们总是在一行上（也检查手机）。 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.或以其他方式将其设置为比字体大小高约 4px，这样它就不会默认为大的东西，最好把结果放上去。 eg font-size:16px; line-height:20px例如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). font-size:16px; line-height:20px ，在<table style="...">上所以它下面的所有东西都继承了它（我假设你不使用其他 styles 来覆盖它，因为它应该都是内联的）。

当我尝试附加为电子邮件内容时，内联样式不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-03-27 21:16:29

当我尝试附加为电子邮件内容时，内联样式不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-03-27 21:16:29

解决方案1
0 已采纳 2022-03-27 21:16:29