电子邮件中的表格单元格高度问题

Question

我在html电子邮件中有以下代码：

<table style="margin: 32px 0; border: 0; border-spacing: 0; border-collapse: collapse;">
    <tr>
        <td style="width: 50%; vertical-align: top; padding: 0; border: 0; line-height: 1; background: red;">Invoice Number</td>
        <td style="width: 50%; vertical-align: top; padding: 0; border: 0; line-height: 1; background: red;"></td>
    </tr>
    <tr>
        <td style="width: 50%; vertical-align: top; padding: 0; border: 0; line-height: 1; background: red;">Tax Point</td>
        <td style="width: 50%; vertical-align: top; padding: 0; border: 0; line-height: 1; background: red;">30/11/2017 11:48:32</td>
    </tr>
    <tr>
        <td style="width: 50%; vertical-align: top; padding: 0; border: 0; line-height: 1; background: red;">Payer ID</td>
        <td style="width: 50%; vertical-align: top; padding: 0; border: 0; line-height: 1; background: red;">Senior Internet</td>
    </tr>
</table>

<table class="invoice-items">
    <tr>
        <th style="font-family: sans-serif; padding: 10px;">Description</th>
        <th style="font-family: sans-serif; padding: 10px;">Item Amount</th>
        <th style="font-family: sans-serif; padding: 10px;">Quantity</th>
        <th style="font-family: sans-serif; padding: 10px;">VAT Amount</th>
        <th style="font-family: sans-serif; padding: 10px;">Line Total</th>
    </tr>
    <tr>
        <td style="padding: 10px;">Charity/ public sector</td>
        <td style="padding: 10px;">360.0000</td>
        <td style="padding: 10px;">1</td>
        <td style="padding: 10px;">72.0000</td>
        <td style="padding: 10px;">360.0000</td>
    </tr>
    <tr>
        <td colspan="3" class="empty">&nbsp;</td>
        <td class="no-border">Total</td>
        <td class="green no-border">£432.0000</td>
    </tr>
</table>

但是，我遇到的问题是第一张桌子的格子高度太大了。我尝试过设置填充，边框，线高，我只是不能让红色单元格成为其中文本的高度。

Answer 1

关于您正在使用的CSS或电子邮件客户端，您的代码在此处正常运行，检查它在纯HTML文件中的呈现方式：

查看此答案以测试HTML模板： https://stackoverflow.com/a/1019166/4129382