我创建了两个并排放置电子邮件简报的表格,但在Outlook中查看时,第二个表格位于第一个表格之下。
这是JSfiddle。
HTML:
<div id="container">
<table id="table1">
<tr>
<th colspan="2"> </th>
</tr>
<tr>
<td height="106" colspan="2"> </td>
</tr>
<tr>
<td height="155"> </td>
<td> </td>
</tr>
<tr>
<td height="114"> </td>
<td> </td>
</tr>
</table>
<table id="table2">
<tr>
<th colspan="2"> </th>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td height="236"> </td>
<td> </td>
</tr>
<tr>
<td height="118"> </td>
<td> </td>
</tr>
</table>
</div>
CSS:
#table1, #table2 {
border: 1px solid black;
float: left;
width: 350px;
}
#table2 {
float: right
}
#container {
width: 700px;
margin: 0 auto;
}
答案 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
的宽度,以覆盖表格的宽度。