Question

我正在尝试为HTML电子邮件内容准备标记。我有一张桌子，连续有三个单元格。三个单元格将在移动视图中堆叠，但我需要在移动视图中的每个表格单元格上方引入一个空格。由于这是针对HTML电子邮件内容，我不能使用填充/边距，因为所有电子邮件内容都不支持。任何人都可以帮助我在移动视图中的每个单元格上方获得一些垂直空间（大约20px）吗？

<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. */
  }
}

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

1 个答案: