在 Outlook 上隱藏移動表格 (Hide mobile table on outlook)

問題描述

在 Outlook 上隱藏移動表格 (Hide mobile table on outlook)

我創建了一個時事通訊，但我在移動設備上的表格存在問題。

我有一個這樣的移動表格：

</table class="mobile_table" width="1" height="1">
    <tr>
        <td>
           <img src="mysource/test.jpg">
        </td>
    </tr>
    <tr>
        <td align="center">
           <img src="mysource/test2.jpg">
        </td>
    </tr>
</table>

<style>
  .mobile_table{
        display: none;
        font‑size: 0px;
        max‑height: 0px;
        line‑height: 0px;
        mso‑hide: all;
        width: 0px;
        overflow: hidden;
    }
</style>

我嘗試在桌面上隱藏我的表格版本，它適用於網絡版本，但在 Outlook 上，表格沒有隱藏。

你能幫我解決這個問題嗎？

參考解法

方法 1:

One work around I've found for this, is to use some email client targeting. Wrap the code below around your responsive only elements and it should be hidden in Outlook :) It's basically an if statement saying "If it's not MS Outlook, do this".

<!‑‑[if !mso]><!‑‑‑‑>
    <tr>
    <td class="show_only_mobile" style="width:0; max‑height: 0; height:0; overflow:hidden; display:none;">
    <table width="100%" cellpadding="0" cellspacing="0" border="0" class="show_only_mobile">
        <tr>
            <td>
               <img src="mysource/test.jpg">
            </td>
        </tr>
        <tr>
            <td align="center">
               <img src="mysource/test2.jpg">
            </td>
        </tr>
    </table>
    </td>
    </tr>
<!‑‑<![endif]‑‑>

Then just reset all of the inline CSS in your responsive CSS.

.show_only_mobile {
    display : block !important;
    width : auto !important;
    max‑height: inherit !important;
    overflow : visible !important;
    line‑height: normal !important;
}

You just need to ensure that your code is valid both with, and without the code inside the mso tags.

方法 2:

A handy tool to have bookmarked is Campaign Monitor's CSS Support Guide for Email Clients, which shows that some versions of Outlook do not support the CSS display property.

That is backed up by this MSDN article stating:

The following is a list of all the top‑level cascading style sheet properties that the Cascading Stylesheet Specification, Level 1 supports, but that Word 2007 does not support. Note that Word 2007 considers unsupported cascading style sheet properties to be unknown properties.

• background‑attachment
• background‑image
• background‑position
• background‑repeat
• clear
• display
• float
• list‑style‑image
• list‑style‑position
• text‑transform
• word‑spacing

Similarly, other "tricks" you normally might use to hide an element, such as changing its visibility and/or setting its dimensions to 0 and hiding its overflow are also not supported by those same versions of Outlook.

(by user3375577、Natalie、Shaggy)

參考文件

1. Hide mobile table on outlook (CC BY‑SA 2.5/3.0/4.0)