並排的桌子在Outlook中不起作用

我已經爲電子郵件通訊創建了兩張並排放置的桌子，但在Outlook中查看時，第二張桌子放在第一張桌子的下面。並排的桌子在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; 
}

來源

2013-08-16 SaturnsEye

可以通過嵌套父親表的兩個細胞內的兩個表 –

我會嘗試加入'保證金：0'到表，也嘗試了，如果你設置了'邊境發生了什麼：0像素;'只要你依靠精確的像素。 –

您可以在父表的兩個單元格中嵌套這兩個表。

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

來源

2013-08-16 09:06:34

我已經改變了我的代碼，並與您的想法一起。我認爲這是最適合我所追求的，並應該造成最少的問題。謝謝@Harsh – SaturnsEye

很高興幫助:) 另外，請記住，如果您的目標郵件客戶端，將您的CSS內聯到元素的樣式屬性。 –

我一直在嘗試幾個小時的相對定位，在線等，這是唯一的工作！謝啦 – memo

試試這個：

table{table-layout: fixed;}

，或者你有包裹兩個表中一個div是container。定義像#container{width: 1200px;}這樣的寬度。

按您的評論

容器的寬度只被定義700像素小於兩個表的寬度，這是造成去所述第一表的下方。所以，增加寬度#container它涵蓋了兩個表的寬度。

來源

2013-08-16 08:54:05

'table {table-layout：fixed;}'沒有工作。我不確定如何定義'container'的寬度，因爲我已經有'#container {width：700px; margin：0 auto;}' – SaturnsEye

請參閱編輯答案。 –

我增加了10px的寬度，但它沒有影響任何東西。 DIFF在700px和兩個表都是350px時不夠寬？當然這是確切的寬度？ – SaturnsEye

並排的桌子在Outlook中不起作用

回答

相關問題