当我尝试附加为 e-mail 内容时，内联样式不起作用

Question

我刚刚创建了简单的 html table 并在浏览器中打开，如下所示：

浏览器视图：（预期）

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>

我觉得一切都很好，现在我只想使用这个 html 嵌入到电子邮件内容中，将状态发送给利益相关者。

成功集成为 e-mail 内容后 html 如下所示：

HTML 查看为 E-mail 内容：（未预期）

table header 在 e-mail 内容中看起来很大，但在浏览器中看起来同样不错。

如何减小 header 的大小并使其在浏览器中看起来像。

Answer 1

您 <tr> 上的 height:30% 可能会增加高度。

你也有填充，所以删除它。也许你想要 top 和 bottom 0，但是 left 和 right 5px 这样的话就不会相互对立。那将是： padding:0 5px 在你的 <th>'s.

最后一个可以干扰的是line-height。确保你的 line-height 与 font-size 相同，如果它们总是在一条线上（也检查手机！），或者将其设置为比 [= 高约 4px 24=] 所以它不会默认为大的东西。最好把结果，例如font-size:16px; line-height:20px，在 <table style="..."> 上所以它下面的所有东西都继承了它（我假设你不使用其他样式来覆盖它，因为它应该都是内联的）。

当我尝试附加为 e-mail 内容时，内联样式不起作用

The inline style is not working when I tried to attached as e-mail content

html

css

outlook

html-email