HTML電子郵件中表格單元格的Outlook摺疊

我遇到過這個問題，並且尚未能夠找到解決方案。用一個html電子郵件，我發現在一些Outlook程序中它會摺疊這個單元格。 2007/2010兩次例如：HTML電子郵件中表格單元格的Outlook摺疊

<tr> 
    <td width="10"><img></td> 
    <td width="80">Copy</td> 
    <td width="10"><img></td> 
</tr>

會發生什麼情況是Outlook忽略中間列的單元格的寬度。如果我在寬度上使用CSS，也沒有關係。

<tr> 
    <td style="width:10px;"><img></td> 
    <td style="width:80px;">Copy</td> 
    <td style="width:10px;"><img></td> 
</tr>

這有相同的結果。

我一直無法弄清楚的是Outlook中導致單元格寬度崩潰的設置。而且，通常情況下，它只發生在Outlook中，爲我們公司的首席執行官。我不再用這種方式複製一個單元格，因爲我擁有更穩定的工作方式，但有時市場營銷部門認爲他們知道他們在做什麼，並且改變了我認爲它會工作的代碼，當我知道它會不在Outlook的CEO電腦上。

有沒有人知道Outlook中的設置是什麼原因造成的？我很想在計算機上安裝這個設置，所以我不需要首席執行官來測試它。

來源

2011-06-17 Michael S.

處理相同的問題。請在發現時發佈您的答案。查看在Outlook中呈現的HTML源代碼就像我已經得到的那樣。桌子有新的，我沒有說明，尺寸，點數！ – aaandre

1）寬度（拼寫正確）不應該有CSS樣式。寬度可以以像素爲單位指定（width =「80」），也可以指定百分比（width =「20％」）2）將添加到空元素中3）添加內聯CSS（style =「font-size; NNpx; line- height：NNpx;「），對於任何具有文本的元素，即使它是非破壞性空間，最後，使用6長HEX聲明背景顏色（bgcolor =」＃FFFFFF「），而不管項目是否具有內容或者不是因爲Outlook不善處理未着色的單元格。有關其他提示，請參閱CampaignMonitor網站。 – artcase

你能提供一個更廣泛的代碼示例w /整個表而不只是一行嗎？會幫助給出一個線索爲什麼會發生這種情況。

無論如何，在Outlook中適用於我的東西是在表格中添加一個頂部行，強制列寬達到高度。一個1x1透明GIF，與除了表單元格的寬度設置寬度，似乎即使觀聽一個「蠻力」方法的工作：

<table> 
    <tr> 
    <td width="10" height="1"><img width="10" height="1" /></td> 
    <td width="80" height="1"><img width="80" height="1" /></td> 
    <td width="10" height="1"><img width="10" height="1" /></td> 
    </tr>

，然後在其下方的行符合的是，列寬第一排。

來源

2011-06-17 20:39:21

這並不是真正的「代碼是正確的」，它更多的與Outlook中的設置有關。我知道它爲什麼會發生，我不知道Outlook中的設置會導致表崩潰。我永遠不會用這種方式編碼。營銷人員喜歡在他們不應該的時候混淆代碼，因爲他們認爲他們知道自己在做什麼。我只是不想打擾公司的首席執行官只是爲了得到證明/示例來表明他們錯了營銷。我希望在我的計算機上啓用該設置。 –

是的，我也爲營銷部門工作，我知道這是怎麼回事！所以我正在假設一個人無法控制收件人的個人電子郵件客戶端設置，需要一種「安全」的編碼方式，儘可能廣泛地工作。對不起，我誤解了這個問題。事情是，我不確定Outlook中是否有可用的設置來改變這種行爲 - 它可能被隱藏在Outlook的HTML渲染引擎中，而AFAIK不提供用戶配置選項。如果一個更大的Outlook專家有不同的理解，我希望他們發佈更好的答案。 –

蠻力（1px圖像）在較新版本的Outlook中失敗，使單元展開。如果單元格中沒有內容，我會建議在單元格內添加。另外，避免colspans。 http://www.activecampaign.com/email-design-guide/ – artcase

我在Outlook 2013 for Windows中遇到了這個問題。它在Outlook for Mac（以及Gmail和幾乎所有其他現代電子郵件客戶端）中運行良好，但在Outlook 2013 for Windows中，它會完全崩潰。

解決方案很簡單：如果聲明像素寬度（內聯樣式除外），則不要放入px。你必須是真正的老派。這是我的最後（工作）代碼：

<table cellspacing="0" cellpadding="0" border="0"> 
    <tr> 

    <td width="1" align="left" valign="top" bgcolor="#ffffff"><img src="#"></td> 
    <td width="150" align="center" bgcolor="#ffffff"><span style="font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: lighter;"><a style="color: #5f6062; text-decoration: none;" href="#">SECTION 1</a></span></td> 

    <td width="150" align="center" bgcolor="#ffffff"><span style="font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: lighter;"><a style="color: #5f6062; text-decoration: none; text-decoration: none;" href="#">SECTION 2</a></span></td> 

    <td width="150" align="center" bgcolor="#ffffff"><span style="font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: lighter;"><a style="color: #5f6062; text-decoration: none;" href="#">SECTION 3</a></span></td> 

    <td width="149" align="center" bgcolor="#ffffff"><span style="font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: lighter;"><a style="color: #5f6062; text-decoration: none;" href="#">SECTION 4</a></span></td> 

    </tr> 
    </table>

來源

2015-03-17 22:31:45 Tim

HTML電子郵件中表格單元格的Outlook摺疊

回答

相關問題