如何在移动视图的 tr 中在 td 上方添加空格而不使用填充/边距

Question

我正在尝试为 HTML 电子邮件内容准备标记。我有一个表格，其中连续三个单元格。这三个单元格将在移动视图中堆叠，但我需要在移动视图中的每个表格单元格上方引入一个空间。由于这是针对 HTML 电子邮件内容的，因此我不能使用填充/边距，因为并非所有电子邮件内容都支持它们。谁能帮我在移动视图中的每个单元格上方实现一些垂直空间（大约 20 像素）？

<table cellspacing="0 " cellpadding="0 " border="0 " style="padding:0px 20px 0px 20px;display: table;width: 100%; " id="transaction-tools">
    <tr style="display:table-row">
        <!-- <td height="20"></td> -->
        <td style="display:table-cell" align="center " class="transaction-tool-td" style="font-family:'Roboto-Light', 'Roboto Light', 'Roboto';font-size:11pt; ">
            <!-- Link Detail -->
            <a href="http://find locations image link " style="display: inline-block; padding: 5px;color: black; font-family: 'Roboto-Light', 'Roboto Light', 'Roboto';font-style: normal;text-align: center;line-height: 28px; ">
                <c:if test="true "><img align=" " src="http://localhost:7003/sites/Satellite?blobcol=urldata&blobkey=id&blobtable=MungoBlobs&blobwhere=1502441291841&ssbinary=true " alt="find locations img " title="find locations img " height=" " width=" " style="display:block; margin:0; padding:0 " /></c:if>
            </a>
            <p> FIND LOCATIONS </p><br/>
            <table>
                <tr>
                    <td height=40></td>
                </tr>
            </table>
        </td>
        <!-- <td height="20"></td> -->
        <td style="display:table-cell" align="center " class="transaction-tool-td" style="font-family:'Roboto-Light', 'Roboto Light', 'Roboto';font-size:11pt; ">
            <!-- Link Detail -->
            <a href="http://estimates image link " style="display: inline-block; padding: 5px;color: black; font-family: 'Roboto-Light', 'Roboto Light', 'Roboto';font-style: normal;text-align: center;line-height: 28px; ">
                <c:if test="true "><img align=" " src="http://localhost:7003/sites/Satellite?blobcol=urldata&blobkey=id&blobtable=MungoBlobs&blobwhere=1502441291789&ssbinary=true " alt="estimates img " title="estimates img " height=" " width=" " style="display:block; margin:0; padding:0 " /></c:if>
            </a>
            <p> ESTIMATE FEES & EXCHANGE RATES </p><br/>
            <table>
                <tr>
                    <td height=40></td>
                </tr>
            </table>
        </td>
        <!-- <td height="20"></td> -->
        <td style="display:table-cell" align="center " class="transaction-tool-td" style="font-family:'Roboto-Light', 'Roboto Light', 'Roboto';font-size:11pt; ">
            <!-- Link Detail -->
            <a href="http://track transactions image link " style="display: inline-block; padding: 5px;color: black; font-family: 'Roboto-Light', 'Roboto Light', 'Roboto';font-style: normal;text-align: center;line-height: 28px; ">
                <c:if test="true "><img align=" " src="http://localhost:7003/sites/Satellite?blobcol=urldata&blobkey=id&blobtable=MungoBlobs&blobwhere=1502441291815&ssbinary=true " alt="track transactions img " title="track transactions img " height=" " width=" " style="display:block; margin:0; padding:0 " /></c:if>
            </a>
            <p> TRACK TRANSACTIONS </p><br/>
            <table>
                <tr>
                    <td height=40></td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td height="20 " style="font-size:1px; line-height:1px; mso-line-height-rule: exactly; ">&nbsp;</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Answer 1

使用透明边框怎么样？

@media screen (max-width: 768px) {
  td {
    border-top: 100px solid transparent; /* Or the size you may need. */
  }
}