Question

尝试将送货详细信息和订单详细信息表格排在同一行中彼此相邻的位置。我将它们放在包装表中，并将宽度设置为50％，但它们仍然以块格式排列。使其中一个宽度小于50％并没有改变任何东西。

----这是一封电子邮件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Climatic Corporation</title>
<style type="text/css">
/*RESET STYLES*/
body         {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family: Tahoma, Verdana, Segoe, sans-serif;}
table{border-collapse:collapse;}
img, a img{border:0; outline:none; text-decoration:none;}
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}

/*CLIENT SPECIFIC STYLES*/
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;}
table,td{mso-table-lspace:0pt; mso-table-rspace:0pt;}
#outlook a{padding:0;}
img{-ms-interpolation-mode: bicubic;}
body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}

/*Custom Styles*/
#mainTable{
border:4px solid black;
}

/*Mobile Styles*/

@media only screen and (max-width:479px) {
}
</style>
</head>
<body>
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="620" id="containerTable">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="headerTable">
<tr>
<td align="left" valign="top">
<img src="CClogo.png" alt="Climatic Corporation Logo">
</td>
<td align="right" valign="top">
<a href="tel:800-845-4555">800-845-4555</a>
<br>
<a href="mailto:csr@climaticcorp.com">csr@climaticcorp.com</a>
<br>
<a href="http://www.climatichomeproducts.com">climatichomeproducts.com</a>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="mainTable">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="messageTable">
<tr>
<td align="left" valign="top" width="100%">
<h1>THANK YOU!</h1>
</td>
</tr>
<tr>
<td align="left" valign="top" width="100%">
<p>Hello @@Shopper - thanks for shopping with us.</p>
</td>
</tr>
<tr>
<td align="left" valign="top" width="100%">
<p>Order @@OrderNumber has been placed. We appreciate your business.</p>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="detailsWrapper">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="50%" id="shippingTable">
<tr>
<td align="left" valign="top">
<h3>Shipping Details</h3>
<p>@@ShippingAddress</p>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="50%" id="orderTable">
<tr>
<td align="left" valign="top">
<h3>Order Details</h3>
<p>@@PONumber</p>
<p>@@NumItems units</p>
<p>@@OrderValue dollars</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>

这里是小提琴https://jsfiddle.net/baLn4ucj/

Answer 1

要使表格中的单元格彼此相邻，它们需要位于不同的“td”元素中。如果它们处于相同的“td”，它们将成为正常流量的一部分。

我在这里通过修改你的例子为你演示了这个。

<tr>
    <td> left </td>
    <td> right </td>
</tr>

https://jsfiddle.net/DonatoBorrello/baLn4ucj/1/

如何让表格彼此相邻排列

1 个答案: