Internet Explorer /Microsoft Outlook 中的表格宽度

Posted 2023-03-06

技术标签:

【中文标题】Internet Explorer /Microsoft Outlook 中的表格宽度【英文标题】：Table width in Internet Explorer /Microsoft Outlook 【发布时间】：2018-08-29 07:27:48 【问题描述】：

我正在处理邮件，但在 IE/Outlook 中的表格元素中设置宽度时遇到问题。

我已经尝试了一些我在其他问题中看到的东西，但它们似乎都不起作用。

代码是这样的，它包含了我尝试过的一些解决方案。包裹表格的 div 用于其他造型必需品。

<!doctype html>
<html lang=en>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            *
                margin:0;
                padding:0;
            
            body
                box-sizing: border-box;
            
            table
                border-collapse: collapse;
                border-spacing: 10px 5px;
            
            </style>
    </head>

    <body>

        <div style="margin:0 auto; width:1000px;">

            <!--[if mso]>
                 <center>
                 <table><tr><td >
            <![endif]-->

            <table cellpading="0" cellspacing="0" width=700 style="margin:0 auto; width: 700px">

                <!--A lot of <TR> -->

            </table>

            <!--[if mso]>
                </td></tr></table>
                </center>
            ![endif]-->  

            <div>
    </body>
</html>

【问题讨论】：

【参考方案1】：

以下是我们使用的示例：

<table style="background-color: #f7f7f7;" cellspacing="0" cellpadding="0" border="0" >
<tbody>
    <tr>
        <td valign="top" align="center">
            <table cellspacing="0" cellpadding="0" border="0" >
                <tbody>
                        << DROP HERE YOUR TEMPLATE>>
                </tbody>
            </table>
        </td>
    </tr>
</tbody>

我希望这是解决方案。

【讨论】：

这是老派。来自 OP 的代码是混合编码方法，有助于电子邮件响应更快，并且需要最少的 CSS。【参考方案2】：

您的代码几乎没有问题，您错过了关闭endif 的第二个代码。试试下面的代码，看看效果如何。

<!doctype html>
<html lang=en>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            *
                margin:0;
                padding:0;
            
            body
                box-sizing: border-box;
            
            table
                border-collapse: collapse;
                border-spacing: 10px 5px;
            
            </style>
    </head>

    <body>

        <div style="margin:0 auto; width:1000px;">

            <!--[if mso]>
                 <center>
                 <table><tr><td >
            <![endif]-->

            <table cellpading="0" cellspacing="0" width=700 style="margin:0 auto; width: 700px">
<tr><td>
                <!--A lot of <TR> --> 
                Content here
</td></tr>
            </table>

            <!--[if mso]>
                </td></tr></table>
                </center>
            <![endif]-->  

            <div>
    </body>
</html>

【讨论】：

以上是关于Internet Explorer /Microsoft Outlook 中的表格宽度的主要内容，如果未能解决你的问题，请参考以下文章

如何从 Internet Explorer 11 降级到 Internet Explorer 10？

为啥即使在模拟 Internet Explorer 8 文档模式时，Internet Explorer 11 也不支持条件注释？

html Internet Explorer支持使用条件注释。以下代码段在旧版Internet Explorer中添加了HTML5和CSS3支持