html - 删除单元格填充(用于电子邮件)

Question

我在问为什么下面代码中的单元格中有 1px 的填充:

     <table style="border: 1px solid #B0B0B0; width: 900px; height: 196px;border-collapse: collapse;">
        <tr>
            <td rowspan=2 style="vertical-align: top;">
                <img src="http://ayudawp.com/wp-content/uploads/2008/08/imagen.jpg" alt="imagen" style="height:193px; width:285px;">
            </td>
            <td colspan=2 style="text-align: center;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna $
            </td>
        </tr>
        <tr>
            <td>
                20e
            </td>
            <td>
                -60 %
            </td>
            </tr>
        </tr>
    </table>

我希望图像没有顶部和左侧的 padding。而且我不能使用 padding 属性。阅读 CSS table 规范，我读到如果一行中有不同 height 的单元格，则会添加额外的 padding ，但即使强制每个单元格具有相同的高度并不能解决这个问题。

Answer 1

根据你所说的

And I can't use the padding attribute

在我看来，您是将此代码用于电子邮件目的。

所以，这是一个可能的解决方案，通过为 table 使用旧的 cellpadding 和 cellspacing 属性(另外我添加了 display :block 到您的 img 以修复由于 img 是内联元素而造成的差距)

<table cellpadding="0" cellspacing="0" style="border: 1px solid #B0B0B0; width: 900px; height: 196px;border-collapse: collapse;">
    <tr>
        <td rowspan="2" style="vertical-align: top;">
            <img src="http://ayudawp.com/wp-content/uploads/2008/08/imagen.jpg" alt="imagen" style="height:193px; width:285px;display:block" />
        </td>
        <td colspan="2" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna $</td>
    </tr>
    <tr>
        <td>20e</td>
        <td>-60 %</td>
    </tr>
</table>

如果这不用于电子邮件目的，请不要使用cellpadding 或cellspacing，因为它们已被弃用，因此您必须使用CSS 属性相反，例如 padding。