并排的表格在 Outlook 中不起作用答案

【问题标题】：Tables side by side won't work in Outlook并排的表格在 Outlook 中不起作用
【发布时间】：2013-08-18 14:59:56
【问题描述】：

我为电子邮件通讯创建了两个并排放置的表格，但在 Outlook 中查看时，第二个表格位于第一个下方。

这里是JSfiddle。

HTML：

<div id="container">

<table id="table1">
    <tr>
        <th colspan="2">&nbsp;</th>
    </tr>
    <tr>
        <td height="106" colspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td height="155">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td height="114">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

<table id="table2">
    <tr>
        <th colspan="2">&nbsp;</th>
    </tr>
    <tr>
        <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td height="236">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td height="118">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

</div>

CSS：

#table1, #table2 {
    border: 1px solid black;
    float: left;
    width: 350px;
}
#table2 {
    float: right
}
#container {
    width: 700px;
    margin: 0 auto;
}

【问题讨论】：

您可以将两个表嵌套在父表的两个单元格中
我会尝试将margin:0 添加到表格中，并尝试如果您设置border:0px; 会发生什么，只要您依靠精确的像素。

标签： css html-table outlook html-email

【解决方案1】：

您可以将两个表嵌套在父表的两个单元格中。

<table class="father">
  <tr>
    <td>
        <table>...</table>
    </td>
    <td>
        <table>...</table>
    </td>
  </tr>
</table>

【讨论】：

我已经更改了我的代码并接受了你的想法。我认为它最适合我所追求的，并且应该引起最少的问题。谢谢@Harsh
很高兴为您提供帮助 :) 另外，请记住，如果您的目标是邮件客户端，请将您的 css 内联到元素的样式属性中。
我已经尝试了几个小时的相对定位、内联等，这是唯一有效的方法！谢谢人

【解决方案2】：

试试这个：

table{table-layout: fixed;}

或者您将两个表都包装在一个 div 中，即container。像#container{width: 1200px;}一样定义它的宽度。

根据您的评论

容器的宽度仅定义为 700 像素，小于导致低于第一个表的两个表的宽度。所以，增加#container 的宽度，覆盖两个表格的宽度。

【讨论】：

table{table-layout: fixed;} 没有用。而且我不确定如何定义container 宽度，因为我已经有了#container{width:700px;margin:0 auto;}
我将宽度增加了 10 像素，但它没有影响任何东西。当它是 700px 并且两个表都是 350px 时，DIV 怎么不够宽？确定这是确切的宽度吗？