當我嘗試附加為電子郵件內容時，內聯樣式不起作用

Question

我剛剛創建了簡單的 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>

我認為一切看起來都不錯，現在我只想使用此 html 嵌入為 email 內容，以將狀態發送給利益相關者。

成功集成為電子郵件內容后，html 如下所示：

HTML view as E-mail content: (Not Expected) 回復

表 header 在電子郵件內容中看起來很大，但在瀏覽器中看起來同樣不錯。

我怎樣才能減少 header 的大小並使其在瀏覽器中看起來像。

Answer 1

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

你也有填充，所以刪除它。 也許你想要 top 和 bottom 0，但是 left 和 right 5px 這樣的話就不會相互對立。 那將是： padding:0 5px on your <th>'s 。

可能干擾的最后一件事是行高。 確保你的 line-height 與 font-size 相同，如果它們總是在一行上（也檢查手機）。 或以其他方式將其設置為比字體大小高約 4px，這樣它就不會默認為大的東西，最好把結果放上去。 例如font-size:16px; line-height:20px 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