how to add spaces above the td in a tr in mobile view without using padding/margin

I am trying to prepare mark-up for HTML email content. I have a table which has three cells in a row. The three cells will be stacked in mobile view but I need to introduce a space above each table cell in mobile view. As this is for an HTML email content, I cannot use padding/margin as they are not supported by all email contents. Can any one please help me to achieve some verticall space(around 20px) above each cell in mobile view ?

<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>

Solution

How about using a transparent border?

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