css - 表を並べて表示すると、Outlook では機能しません

Question

メール ニュースレター用に 2 つのテーブルを作成しましたが、Outlook で表示すると、2 番目のテーブルが最初のテーブルの下に表示されます。

これが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;
}

Answer 1

これを試して：

table{table-layout: fixed;}

または、両方のテーブルを div でラップしましたcontainer。このように幅を定義し#container{width: 1200px;}ます。

あなたのコメント通り

コンテナーの幅は、両方のテーブルの幅よりも小さい 700 ピクセルのみに定義されているため、最初のテーブルの下に移動します。したがって、#container両方のテーブルの幅をカバーする幅を増やします。