1. 首頁
  2. 問答
  3. Outlook 2013中的tr，td寬度

Outlook 2013中的tr，td寬度

2017-06-14 80 views
0

我在SO上搜索的所有解決方案都無助於我解決問題。我不能在我的tr和td上使用Outlook電子郵件客戶端工作。這裏是一個示例：Outlook 2013中的tr，td寬度

<table width="600" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="0" cellpadding="0" cellspacing="0"> 
    <tbody width="600" style="box-sizing: border-box; width: 100%;"> 
    <!--Header Row--> 
    <tr width="600" style="box-sizing: border-box; width: 100%;"> 
     <td width="600" style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><a href="http://example.org" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none;"> <img src="http://example.img-us3.com/BarberJ/header-image-560.png" width="100%" height="auto" alt="header-image.png" title="header-image.png" style="box-sizing: border-box;"></a></td> 
    </tr> 
    <!--End Header Row--><!--Hero Image Row--> 
    <tr style="box-sizing: border-box; width: 100%;"> 
     <td style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><img src="http://example.img-us3.com/BarberJ/hero-image-560.png" width="100%" height="auto" alt="hero-image.png" title="hero-image.png" style="box-sizing: border-box;"></td> 
    </tr> 
    <!--End Hero Image--><!--Main Heading/CTA--> 
    <tr width="600" style="box-sizing: border-box; width: 100%;"> 
     <td width="75%" style="box-sizing: border-box; width: 75%; display: inline-block; padding: 0; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"> 
     <h1 style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 26px; margin-bottom: 0px; font-weight: 800; color: #425563; margin-top: 4px;">Knitting New Knockers</h1> 
     <p style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 12px; margin-top: 4px; font-weight: 100; color: #425563;">How a knitting Group is putting the 'ta-da' back in ta-tas.</p> 
     </td> 
     <td width="25%" style="box-sizing: border-box; display: inline-block; padding: 0; width: 25%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"> 
     <table border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"> 
      <tbody> 
      <tr style="box-sizing: border-box;"> 
       <td bgcolor="#9F1C3B" style="box-sizing: border-box; display: inline-block; padding: 5px 15px; -webkit-border-radius: 30px; border-radius: 30px; color: #fff; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" align="center"><a target="_blank" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none; font-size: 16px; color: white;">Discover How</a> 
       </td> 
      </tr> 
      </tbody> 
     </table> 
     </td> 
    </tr> 
</tbody> 
</table>

我已經嘗試給所有td和tr添加固定寬度。我試圖刪除任何百分比。 Outlook中什麼都沒有工作......我的問題在哪裏？

來源

2017-06-14 JordanBarber

回答

1

在第三行<tr>行中，您添加了第二個<td>，寬度爲25％。

獲得更清晰輸出的方法是將表格分成兩個表格，一個用於前兩行圖像，另一個用於兩行表格的其餘部分。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 
<body> 
    <table width="600" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="1" cellpadding="0" cellspacing="0"> 
    <tbody width="600" style="box-sizing: border-box; width: 100%;"> 
    <!--Header Row--> 
    <tr width="600" style="box-sizing: border-box; width: 100%;"> 
     <td width="600" style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><a href="http://example.org" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none;"> <img src="http://example.img-us3.com/BarberJ/header-image-560.png" width="100%" height="auto" alt="header-image.png" title="header-image.png" style="box-sizing: border-box;"></a></td> 
    </tr> 
    <!--End Header Row--><!--Hero Image Row--> 
    <tr style="box-sizing: border-box; width: 100%;"> 
    <td style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><img src="http://example.img-us3.com/BarberJ/hero-image-560.png" width="100%" height="auto" alt="hero-image.png" title="hero-image.png" style="box-sizing: border-box;"></td> 
    </tr> 
    <!--End Hero Image--><!--Main Heading/CTA--> 
</table> 
<table width="600" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="1" cellpadding="0" cellspacing="0"> 
<tbody width="600" style="box-sizing: border-box; width: 100%;"> 
<tr width="600" style="box-sizing: border-box; width: 100%;"> 
    <td width="75%" style="box-sizing: border-box; width: 75%; display: inline-block; padding: 0; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"> 
    <h1 style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 26px; margin-bottom: 0px; font-weight: 800; color: #425563; margin-top: 4px;">Knitting New Knockers</h1> 
    <p style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 12px; margin-top: 4px; font-weight: 100; color: #425563;">How a knitting Group is putting the 'ta-da' back in ta-tas.</p> 
    </td> 
    <td width="25%" style="box-sizing: border-box; display: inline-block; padding: 0; width: 25%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"> 
    <table border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"> 
     <tbody> 
     <tr style="box-sizing: border-box;"> 
      <td bgcolor="#9F1C3B" style="box-sizing: border-box; display: inline-block; padding: 5px 15px; -webkit-border-radius: 30px; border-radius: 30px; color: #fff; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" align="center"><a target="_blank" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none; font-size: 16px; color: white;">Discover How</a> 
      </td> 
      </tr> 
     </tbody> 
     </table> 
    </td> 
    </tr> 
</tbody> 
</table> 
</body> 
</html>

這是你的表將如何看在展望2016年修正後：

好運。 Your table cell in Outlook 2016 with border=1

來源

2017-06-14 19:52:48 gwally

0

你錯過了td的發言權。你更大的兩個圖像在單個TD上，最下面的一行在兩個TD上。這就是你的表沒有對齊的原因。也儘量不要使用盒子大小，舊的瀏覽器不讀取它，它的正義代碼佔用文件大小。所有的電子郵件開發人員都知道幾千字節在電子郵件中的重要性。

<table width="600" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="0" cellpadding="0" cellspacing="0"> 
 
<tbody width="600" style="box-sizing: border-box; width: 100%;"> 
 
    <tr style="box-sizing: border-box; width: 100%;"> 
 
    <td style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><table width="600" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="0" cellpadding="0" cellspacing="0"> 
 
     <tbody width="600" style="box-sizing: border-box; width: 100%;"> 
 
     <!--Header Row--> 
 
     <tr width="600" style="box-sizing: border-box; width: 100%;"> 
 
      <td width="600" style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><a href="http://example.org" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none;"> <img src="http://example.img-us3.com/BarberJ/header-image-560.png" width="100%" height="auto" alt="header-image.png" title="header-image.png" style="box-sizing: border-box;"></a></td> 
 
     </tr> 
 
     <!--End Header Row--> 
 
     <!--Hero Image Row--> 
 
     <tr style="box-sizing: border-box; width: 100%;"> 
 
      <td style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><img src="http://example.img-us3.com/BarberJ/hero-image-560.png" width="100%" height="auto" alt="hero-image.png" title="hero-image.png" style="box-sizing: border-box;"></td> 
 
     </tr> 
 
     <!--End Hero Image--> 
 
     <!--Main Heading/CTA--> 
 
     </tbody> 
 
    </table></td> 
 
    </tr> 
 
</tbody> 
 
</table> 
 
<table width="600" border="0" cellpadding="0" cellspacing="0" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"> 
 
    <tbody width="600" style="box-sizing: border-box; width: 100%;"> 
 
    <!--Header Row--> 
 
    <!--End Header Row--> 
 
    <!--Hero Image Row--> 
 
    <!--End Hero Image--> 
 
    <!--Main Heading/CTA--> 
 
    <tr width="600" style="box-sizing: border-box; width: 100%;"> 
 
     <td width="75%" style="box-sizing: border-box; width: 75%; display: inline-block; padding: 0; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><h1 style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 26px; margin-bottom: 0px; font-weight: 800; color: #425563; margin-top: 4px;">Knitting New Knockers</h1> 
 
     <p style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 12px; margin-top: 4px; font-weight: 100; color: #425563;">How a knitting Group is putting the 'ta-da' back in ta-tas.</p></td> 
 
     <td width="25%" style="box-sizing: border-box; display: inline-block; padding: 0; width: 25%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><table border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"> 
 
     <tbody> 
 
      <tr style="box-sizing: border-box;"> 
 
      <td bgcolor="#9F1C3B" style="box-sizing: border-box; display: inline-block; padding: 5px 15px; -webkit-border-radius: 30px; border-radius: 30px; color: #fff; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" align="center"><a target="_blank" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none; font-size: 16px; color: white;">Discover How</a></td> 
 
      </tr> 
 
     </tbody> 
 
     </table></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

希望這是你以後的答案。

來源

2017-06-14 19:40:28 Syfer

相關問題

 相關問題