<table> 标记的属性“宽度”在 Outlook 中无法正常工作答案

【问题标题】：Attribute "Width" of <table> tag does not work properly in Outlook<table> 标记的属性“宽度”在 Outlook 中无法正常工作
【发布时间】：2015-07-20 20:58:29
【问题描述】：

我一直在使用 html 电子邮件模板。我的工作快要结束了。该模板在市长电子邮件客户端中看起来相当不错。但是 Outlook 2007/2010/2013 存在问题。这三个人不尊重我模板的最大宽度。我真的不知道为什么会这样。

你有什么想法吗？
任何建议将被认真考虑。谢谢。

<body style="margin:0; font-size:13px; font-family:'Trebuchet MS', Helvetica, Verdana, Arial;" bgcolor="#bb9dd8">   

    <table width="100%" cellspacing="0" cellpadding="0" border="0">     
        <tr>
            <td bgcolor="#bb9dd8">

            <!-- //Begin Main Container\\  -->              
                <table class="mainContainer" style="margin-top:20px;" width="640px"  align="center" cellspacing="0" cellpadding="0" border="0">

        <!-- //From here begin header and the layout structure\\  -->

那是定义最大宽度的代码。谢谢。

【问题讨论】：

有什么问题？是否低于 100% 或更多？如果更多，请使用 table-layout:fixed;为了冻结你的桌子的宽度
谢谢。想法是什么？要将桌子固定到特定尺寸？无论如何，如果在询问 Outlook 的问题。是模板需要超过 640 像素，这是想要的最大宽度。
这个想法是，没有你的完整代码，我指向了这个w3.org/wiki/CSS/Properties/table-layout。此外，对于 Outlook，您可以尝试使用 width:expression(...) 旧 IE(websitecodetutorials.com/code/ie/ie6-min-max-height-width.php 或您使用“IE CSS EXPRESSION”找到的任何其他链接，例如来自google.fr/search?q=ie+css+expression 的mark-story.com/posts/view/css-expressions-in-ie-and-scoping

标签： html css outlook html-email

【解决方案1】：

您是对的，PC 版本的 Outlook 2007+ 不支持最大宽度。不过，您可以在此处采用两种方法之一来实现流畅的宽度。

使用一些 Outlook 条件代码来建立一个固定宽度的表格。这将被其他电子邮件客户端忽略。

<table width="100%">
  <tr>
    <td>
      <!--[if gte mso 9]>
        <table width="640" style="width:640px">
          <tr>
            <td>
              <![endif]-->
                Put main content table here
              <!--[if gte mso 9]>
           </td>
         </tr>
        </table>
     <![endif]-->
    </td>
  </tr>
</table>

另一种方法涉及使用媒体查询和 3 列表。外列将有不间断的空格，中间将设置为您的 Outlook 宽度并包含您的主表。

<style>
@media only screen and (min-width: 640px) {
  .maxW {width: 640px !important;}
}
</style>
<table align="center" width="100%" >
   <tr>
      <td>&nbsp;</td>
      <td align="center"  valign="top" width="640" style="width:640px" >
         <table align="center" style="margin: auto; max-width: 640px" width="100%" class="maxW">
            <tr>
               <td>Put your header image here</td>

【讨论】：

谢谢@BillMalcolm。我明白。这个想法是使用媒体查询来获取 Outlook 自动设置的大小并强制它获得我想要的大小（640px）。但关键是，正如您在上面的代码中看到的那样，我有一个：1st level table ----> width=100% (which is the whole screen) 2nd level table ----> width=640px (which is the template itself) 从这一点开始，所有都被限制为相同的宽度，这是我想要的大小。为什么我需要在 Outlook 中指定 640 像素或更大的尺寸？谢谢。
啊，我现在明白了。你的代码有链接吗？任何数量的事情都可能把你的桌子炸飞。一张尺寸不合适的图片，一串完整的字符，如 URL 等。创建小提琴或发布链接，我会看看