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

我想改變我的桌子，以便在移動平臺上看起來不錯。我想要做的就是改變我的桌子，所以它是兩列。我正在使用此代碼發送電子郵件。所以我不能將樣式錶鏈接到我的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

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

回答

相關問題