HTML 电子邮件，导航显示在移动设备的底部

Question

我正在学习编写响应式电子邮件模板。目前我有:https://jsfiddle.net/q12yg2z6/

<tr class="main_nav">
    <td id="mobile_nav" width="600">
        <table cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                 <a href="#" style="text-decoration: none; color: #999999;">Nav 1</a>
                </td>
                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                 <a href="#" style="text-decoration: none; color: #999999;">Nav 2</a>
                </td>
                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                 <a href="#" style="text-decoration: none; color: #999999;">Nav 3</a>
                </td>
                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                 <a href="#" style="text-decoration: none; color: #999999;">Nav 4</a>
                </td>
                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                 <a href="#" style="text-decoration: none; color: #999999;">Nav 5</a>
                </td>
                <td align="center" style="padding: 15px 20px; font-family: arial,sans-serif; font-size: 14px; font-weight: bold;">
                 <a href="#" style="text-decoration: none; color: #999999;">Nav 6</a>
                </td>
            </tr>
        </table>
    </td>
</tr>

如您所见，在移动设备上，桌面上的顶部导航将堆叠在底部。但现在它出现在主要 cta 和接下来的两列部分之间。我如何让它出现在页脚。我尝试使用我的代码四处移动，但找不到正确的方法。

Answer 1

使用这个:

@media screen and(max-width:500px){
tr[class="main_nav"] {
   display: table-footer-group;
   position:absolute;
   top:1000px;
   bottom:0px;   
}}