【问题标题】:The width of the TD is ignored in Outlook 2007/2010/2013TD 的宽度在 Outlook 2007/2010/2013 中被忽略
【发布时间】:2017-07-26 01:31:39
【问题描述】:

我在父表中创建了 2 个子表。在除 Outlook 2007/2010/2013 和 2016 之外的所有电子邮件客户端中,表格的宽度看起来都很好。右列向右移动并忽略两侧的 TD 宽度(5%)。谁能帮我解决这个问题?

代码如下:

`

                    <!-- Second slider -->
                    <tr>
                        <td align="center" valign="top">
                            <table class="parentTable" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
                                <tr>
                                    <!-- 1st column - spacing -->
                                    <!-- <td valign="top" width="5%">&nbsp;</td> -->

                                    <!-- 2nd column - left section -->
                                    <td valign="top" width="50%">
                                        <table class="childTable" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;border:none;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;">
                                            <tr>
                                                <td valign="top" width="5%" >&nbsp;</td>
                                                <td width="40%"> 
                                                    <table class="list-table_1" border="0" cellpadding="0" cellspacing="0" style="border:none;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;">
                                                        <tr>
                                                            <td valign="top" align="left" >
                                                                <p class="heading_1" style="font-family: Georgia, serif;">Left Column Content 1</p>
                                                            </td>
                                                        </tr>

                                                        <tr>
                                                            <td valign="top" align="center" height="10">&nbsp;</td>
                                                        </tr>     
                                                        <tr>
                                                            <td valign="top" align="center" >
                                                                <img src="" class="img-responsive" alt="" style="max-width: 100%;" />
                                                            </td>
                                                        </tr>

                                                        <tr>
                                                            <td valign="top" align="center" height="5">&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                            <td valign="top" align="left" >
                                                                <p class="heading_2" style="font-family:Georgia, serif;">Left Column Content 2</p>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td valign="top" width="5%" style="border-right:1px solid #0060af;">&nbsp;</td>
                                            </tr>
                                        </table>
                                    </td>

                                    <td valign="top" width="50%">
                                        <table class="childTable" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;border:none;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;">
                                            <tr>
                                                <td valign="top" width="5%" >&nbsp;</td>
                                                <td width="40%"> 
                                                    <table class="list-table_1" border="0" cellpadding="0" cellspacing="0" style="border:none;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;">
                                                        <tr>
                                                            <td valign="top" align="left" >
                                                                <p class="heading_1" style="font-family: Georgia, serif;">Right Column Content 1</p>
                                                            </td>
                                                        </tr>

                                                        <tr>
                                                            <td valign="top" align="center" height="10">&nbsp;</td>
                                                        </tr>     
                                                        <tr>
                                                            <td valign="top" align="center" >
                                                                <img src="" class="img-responsive" alt="" style="max-width: 100%;" />
                                                            </td>
                                                        </tr>

                                                        <tr>
                                                            <td valign="top" align="center" height="5">&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                            <td valign="top" align="left" >
                                                                <p class="heading_2" style="font-family:Georgia, serif;">Right Column Content 2</p>
                                                            </td>
                                                        </tr>

                                                    </table>
                                                </td>
                                                <td valign="top" width="5%">&nbsp;</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <!-- Second slider ends -->

                </table>



            </td>
        </tr>
    </table>

`

谢谢

【问题讨论】:

  • 在 IE 9、10、11 等中看起来也不错吗?
  • Outlook 不是浏览器,您不能指望电子邮件客户端的行为方式相同。
  • @Rob:我的错。大多数电子邮件客户端的行为方式相同或有些接近但并不完全不同。
  • @User00000: 是的
  • Outlook 对任何开发者来说都是一场噩梦。 2021 年和发展中仍然感觉像在 1999 年

标签: html css


【解决方案1】:

不确定这是否会对您有所帮助,但我之前遇到过 Outlook 会忽略空表格单元格的宽度和高度的问题,即使存在 NBSP 也是如此。

您可以尝试添加与背景颜色相同的下划线之类的内容,看看是否有什么不同。一个小的透明PNG也可以工作。

另一种可能的方法是在 TD 上使用填充而不是指定宽度。

【讨论】:

  • 我添加了填充而不是使用 TD,但现在的问题是右侧表格向下滑动。左侧的桌子保持不变 - 现在该桌子没有问题,但右侧的桌子向下滑动。