并排的表在Outlook中不起作用

时间:2013-08-16 08:47:41

标签: css html-table outlook html-email

我创建了两个并排放置电子邮件简报的表格,但在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;
}

2 个答案:

答案 0 :(得分:6)

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

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

答案 1 :(得分:0)

试试这个:

table{table-layout: fixed;}

或者您已将两个表格包装在container的div中。定义此宽度,如#container{width: 1200px;}

根据您的评论

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