右表行转到左行以下

Question

当空间不足时（小屏幕），我希望右侧的TD（分页按钮）位于左侧的TD（按钮）下方。

可行吗？

<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom:3px">
<tr valign="bottom">
        <td class="smallfont"> "Buttons on Left </td>

    <td align="$stylevar[right]"> "Page navigation Buttons on Right </td>

</tr>
</table>

Answer 1

为表格添加一个额外的列，为桌面隐藏。转到移动设备时，隐藏第一列并显示第三列

  .hide-for-desktop{ display:none; } .@media screen and (max-width: 500px) { table td{ display:block; width:100%; } .hide-for-desktop{ display:block } .hide-for-mobile{ display:none !important; } } 

 <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom:3px"> <tr valign="bottom"> <td class="smallfont hide-for-mobile"> "Buttons on Left </td> <td align="$stylevar[right]"> "Page navigation Buttons on Right </td> <td class="smallfont hide-for-desktop"> "Buttons on Left </td> </tr> </table>