Question

我想改变我的桌子，以便在移动平台上看起来不错。我想做的就是改变我的表，因此它是两列。我正在使用此代码发送电子邮件。所以我无法将样式表链接到我的html。建议我使用内联样式。是否可以使用javascript完成此操作？

以下是我的尝试：

<script>
    $(document).ready(function() {
    if ($(window).width() < 1024) {
        <table align="center">
            <tr>
                <td style="vertical-align: top;">Property:</td>
                <td style="padding-left: 10px; font-weight: bold; width: 300px;">115 EAST 9TH STREET<br>NEW YORK, NY, 10003</td>
            </tr>
            <tr>
                <td style="vertical-align: top;">Resident Name:</td>
                <td style="padding-left: 10px; font-weight: bold; width: 300px; vertical-align: top;">MAILBOXES ETC.</td>
            </tr>
            <tr>
                <td style="">Unit:</td>
                <td style="padding-left: 10px; font-weight: bold;">STORE</td>
            </tr>
            <tr>
                <td style="">Account #:</td>
                <td style="padding-left: 10px; font-weight: bold;">xxx-xxx</td>
            </tr>
        </table>
    } else {
        <table align="center">
            <tr>
                <td style="vertical-align: top;">Resident Name:</td>
                <td style="padding-left: 10px; font-weight: bold; width: 300px; vertical-align: top;">MAILBOXES ETC.</td>
                <td style="vertical-align: top;">Property:</td>
                <td style="padding-left: 10px; font-weight: bold; width: 300px;">115 EAST 9TH STREET<br>NEW YORK, NY, 10003</td>
             </tr>
             <tr>
                  <td style="">Unit:</td>
                  <td style="padding-left: 10px; font-weight: bold;">STORE</td>
             </tr>
             <tr>
                 <td style="">Account #:</td>
                 <td style="padding-left: 10px; font-weight: bold;">xxx-xxx</td>
             </tr>
         </table>
       }});
 </script>

非常感谢任何帮助。

Answer 1

不，绝对不要使用Javascript进行电子邮件发送，因为大多数客户完全禁用它。

即使您只是为Web浏览器设计表，也不需要Javascript。如果您想花一点时间对该主题做进一步的阅读，那么所有问题都可以通过良好应用media queries来解决。毫无疑问，这是值得的。

对于电子邮件，我建议您阅读this awesome article about using media queries for emails。其中一个巨大的缺点是Gmail缺乏支持（作者在文本末尾说明了这一点）。如果必须覆盖Gmail用户，则只要我知道，您就必须坚持使用最基本的响应式实践，例如使用em和/或%单位来{{1}您的CSS样式中有{}，width，height，padding等，而不是margin。

如何根据屏幕尺寸更改我的表格？

1 个答案: