響應HTML電子郵件-Outlook的3列布局間距

Question

我正在嘗試完善3列布局，但表之間的間距存在一些問題，但該問題僅出現在Outlook 2007,10,13中

現在，在其他所有內容（瀏覽器和其他客戶端）中，我都可以將表均勻地排列到其容器的邊緣，而最后一列不落到下一行：

查看圖像：

元素移至下一行的示例

您會從圖像中注意到，第二組列是我要實現的目標，而不必大幅度減少表之間的間距，因此它可以在Outlook中工作，因為這當然會影響所有其他客戶端並制作表看起來很靠近。 （只是在Outlook中並沒有在一起）。

這是整個HTML的鏈接：

請看一下代碼-具體要查找的是寬度為190的表格，然后在表格上方添加注釋<----padding + outlook ----->

注意：您會注意到第一個<----padding + outlook ----->表是不一樣的，這是因為我正在玩它以嘗試找到解決該問題的方法。

我還閱讀了有關Acid和其他服務的電子郵件中的帖子，其中有很多關於Outlook錯誤的注釋，但我根本找不到解決方法！

在此先感謝您的幫助

編輯：由於前景問題，我失去了這么多空間

Answer 1

我了解您正在按這種方式組織表格，以使其“具有響應性”，從而使其在移動瀏覽器中崩潰

<wrapping table><tr>
  <td><table1><padding table><table2><padding table><table3></td>
</tr>
</wrapping table>

有一個技巧可以讓您通過將表放到不同的列中來迫使它們不換行，即：

<wrapping table><tr>
<td><table1></td><td><table2></td><td><table3></td>
</tr>
</wrapping table>

然后在移動環境（使用媒體查詢）中將<td> float屬性更改為float:left ，以使其堆疊。

參見技巧5：浮動列

Answer 2

您的填充表之一具有寬度，而其他填充表則沒有。 這個問題有可能實現。

如果那不起作用，我建議將每個表都包含在表單元格“ td”中，以更好地控制其大小。

Answer 3

修改您的表結構，以使每個框都包含在一個表中，並且3個表中的每一個都包含在一個單獨的行中，並分隔為單獨的列。 利用內部表上的cellpadding和父表上的cellpadding來實現所需的間距，而不是使用空白空間或設置尺寸。

將尺寸分配給父表的總寬度。 確保您有表格，表格td：border-collapse：collapse; 在CSS中，所有表格的邊框都為零，border = 0，cellspacing = 0，cellpadding = 0（需要調整填充的地方除外）。

將您的圖片和文字放在TD中，別無其他。 如果您使用段落或標題標簽，請將其刪除。

如果以這種方式構造表，則直到需要時它都不會包裝。