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

我想改变我的桌子，以便在移动平台上看起来不错。我想要做的就是改变我的桌子，所以它是两列。我正在使用此代码发送电子邮件。所以我不能将样式表链接到我的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>

任何帮助将不胜感激。

来源

2015-06-22 Anthony

你在电子邮件中使用jQuery？ – isherwood

你不能在电子邮件中使用Javascript，你可以但几乎每个邮件客户端都将不允许执行它 –

非常重要的一点是，如果你不了解电子邮件中的编码原则，请首先了解它的原则，检查活动监视器并阅读在他们的材料。 CSS会成为你的助手，除非你的实现不同意（我不明白为什么它） – AGE

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

即使您仅为网页浏览器设计表格，您也不需要使用Javascript。如果你想花一点时间在这个话题上进一步阅读，你所有的问题都可以通过很好的应用media queries来解决。毫无疑问，这是值得的。

对于电子邮件，我建议您阅读this awesome article about using media queries for emails。其中一个巨大的缺点是Gmail缺乏支持（作者在本文结尾处指出）。如果覆盖Gmail用户是必须的，你就会有，只要我知道的，比如使用em和/或%单位width，height，padding，margin等代替px在最基本的响应的做法要坚持你的CSS样式。

来源

2015-06-22 22:22:54 lucasnadalutti

谢谢！我使用媒体查询解决了我的问题。 – Anthony

很高兴能帮到你！ :) – lucasnadalutti

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

回答

相关问题