在不影响 table 中上述 tr 元素的 css 的情况下向上移动按钮

Question

我正在尝试创建一个电子邮件模板，所以我只在 table 和内联 CSS 中做这件事。我面临的样式问题是我无法在不影响上述 2 <tr> 的情况下将按钮向下移动文本 You are a .... some task. 40px。我通过内联 css 将 height 应用到 tr 但不知何故它没有占用高度。我也试过设置边距，填充到最后一个 tr，td 但没有运气。

请告诉我如何在不影响 2 tr 以上的高度、tds 或更好的处理方法的情况下实现这一目标。

Fiddle - https://jsfiddle.net/qd00shr3/

代码-

<body style="background: #2D2D2D; font-family: arial;">
    <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="background: green;height: 320px;">
        <tr>
            <td style="text-align: center;">
                <img src="http://dummyimage.com/600x400/008000/fff.png" style="width:100px;height:100px;" />
            </td>
        </tr>
        <tr>
            <td style="text-align: center;">
                <h2 style="margin-top: -55px;color: #ffffff;padding: 0 68px 0 60px;font-weight: normal;font-size: 32px;">You are a good developer waiting for some task.</h2>
            </td>
        </tr>
        <tr style="height: 100px;">
            <td style="text-align: center;">
                <button style="background: #ff744f; border:none; width: 210px; height: 45px; text-align:center;color: #ffffff;border-radius: 5px;">Check Task</button>
            </td>
        </tr>
    </table>
    <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="background: #ffffff;height: 134px;">
        <tr>
            <td>
                <p style="font-size: 11px;color: #16325c; text-align: justify;padding: 0 30px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. anim id est laborum.
            </td>
        </tr>
    </table>
</body>

Answer 1

我不确定我是否理解正确...这会将您的按钮上移：

position:relative;top:-40px;

在不影响 table 中上述 tr 元素的 css 的情况下向上移动按钮

Move button up without affecting css of above tr elements in a table

html

css

email-templates