我從來沒有見過令人驚歎的訂單確認/發票電子郵件。即使是最好的html5網站發送可怕的訂單確認電子郵件（有時以純文本）。我相信這是因爲發票通常需要使用表格來顯示購買的物品，這在移動設備上非常難以實現。針對移動設備的響應訂單確認電子郵件？
我發現了一些技巧，使表格更易於在手機上管理： http://css-tricks.com/examples/ResponsiveTables/responsive.php，但對於訂單確認電子郵件，這種方法對發票表格不實用。
在移動設備上使訂單確認電子郵件看起來不錯是否有其他選擇？並在發送訂單確認電子郵件時，您應該遠離桌子嗎？
您可以使用液體佈局，以便設置所有寬度並以百分比表示。 我也會研究網格佈局或列布局。
到目前爲止，eBay Google等大多數大型網站仍然使用表格發送電子郵件。 表仍然是有用的，並廣泛使用，但新的css3像flex，column-count，grids ..表可能會在將來棄用。
新的CSS3功能仍在測試中，因此在所有瀏覽器上都不兼容。
http://www.w3schools.com/css/css3_multiple_columns.asp
http://www.w3schools.com/cssref/css3_pr_box-flex.asp
怎麼這樣呢？調整時
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
table td {border-collapse: collapse;}
@media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
</style>
</head>
<body style="margin: 0px; padding: 0px; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF"><table bgcolor="#CCCCCC" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top">
<![endif]-->
<table width="100%" class="maxW" style="max-width: 600px; margin: auto;" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="left" valign="middle" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 24px; color: #353535; padding:3%; padding-top:40px; padding-bottom:40px;">
Invoice
</td>
</tr>
<tr>
<td align="center">
<table width="94%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="70%" align="left" bgcolor="#252525" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #EEEEEE; padding:10px; padding-right:0;">
Item
</td>
<td width="30%" align="right" bgcolor="#252525" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #EEEEEE; padding:10px; padding-left:0;">
Price
</td>
</tr>
<tr>
<td width="70%" align="left" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-right:0;">
Nike Shoes
</td>
<td width="30%" align="right" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
$100
</td>
</tr>
<tr>
<td width="70%" align="left" bgcolor="#EEEEEE" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-right:0;">
Spy Sunglasses
</td>
<td width="30%" align="right" bgcolor="#EEEEEE" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
$120
</td>
</tr>
<tr>
<td width="70%" align="left" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-right:0;">
Buffalo Jeans
</td>
<td width="30%" align="right" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
$80
</td>
</tr>
<tr>
<td width="70%" align="left" bgcolor="#EEEEEE" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-right:0;">
Seiko Watch
</td>
<td width="30%" align="right" bgcolor="#EEEEEE" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
$260
</td>
</tr>
<tr>
<td width="70%" align="right" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
<b>TOTAL</b>
</td>
<td width="30%" align="right" bgcolor="#FFFFFF" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 12px; color: #252525; padding:10px; padding-left:0;">
<b>$560</b>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="middle" style="font-family: Verdana, Geneva, Helvetica, Arial, sans-serif; font-size: 14px; color: #353535; padding:3%; padding-top:40px; padding-bottom:40px;">
Thanks for shopping with us! <!-- using will prevent orphan words -->
</td>
</tr>
</table>
</td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
</td></tr></table></body></html>
要知道，這個模板不作爲流體：這將使用（如Gmail等）液/液技術，即對所有大客戶的工作，包括那些不支持媒體查詢您的瀏覽器窗口。但它適用於所有主要的電子郵件客戶端。
第一步是接受電子郵件必須分發給任何郵件客戶端。通常情況下，不幸的是，這意味着減少設計和標記以符合最低目標的支持。桌子沒有什麼特別的問題。如果你做得對，你可以使用過時的方法實現一個相當普遍的html電子郵件。但正如格雷格所說，意見重大。我個人討厭圖像飽和的電子郵件。我更喜歡儘可能簡單和不混淆。 –