我想将hr放在表格中的两个元素之间。我正在创建邮寄同伴。我怎么能把它放在一排？这是代码：
body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
line-height: 100%;
}
#outlook a {
padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
border-collapse: collapse;
}
.tablereset {
margin: 0 auto;
width: 640px !important;
line-height: 100% !important
}
.button {
margin: 0 auto !important;
}
.devicewidthsocial {
margin: 0 auto;
}
img {
outline: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%!important;
margin: 0;
padding: 0;
display: block;
}
table td {
border-collapse: collapse;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
td.boxesfont {
font-size: 17px !important;
font-family: 'Roboto', Arial, Helvetica, sans-serif!important
}
td[class*=font-resize] {
font-size: 140%!important
}
td[style*="Roboto"] {
font-family: 'Roboto', Arial, Helvetica, sans-serif!important
}
td[style*="Open Sans"] {
font-family: 'Open Sans', arial, sans-serif !important
}
@media only screen and (max-width:640px) {
a[href="tel"],
a[href="sms"] {
text-decoration: none;
color: #ffffff;
pointer-events: none;
cursor: default;
}
tr.removemobile {
display: none;
}
td[class*=threecolumnphoto] {
padding-bottom: 20px;
}
table[class*=button] {
float: none;
}
table.removemobile {
display: none;
}
table.tablereset {
margin: 0 auto;
width: 440px !important;
line-height: 100% !important
}
table[class*=devicewidth] {
width: 440px!important;
text-align: center!important;
float: none!important;
display: table!important;
}
table[class*=devicewidthinner] {
width: 400px!important;
text-align: center!important;
float: none!important;
}
table[class*=devicewidthinner3] {
width: 173px!important;
float: none!important;
}
img[class*=logoImg] {
width: 110px!important;
height: auto!important;
}
}
@media only screen and (max-width:479px) {
table.removemobile {
display: none;
}
table[class*=tablereset] {
margin: 0 auto;
width: 280px !important;
line-height: 100% !important
}
img[class*=logoImg] {
width: 100px!important;
height: auto!important;
}
td[class*=threecolumnphoto] {
padding-bottom: 20px;
}
table[class*=devicewidthright] {
width: 160px!important;
}
table[class*=devicewidth] {
width: 280px!important;
float: none!important;
display: table!important;
}
table[class*=devicewidthinner] {
width: 240px!important;
float: none!important;
}
table[class*=devicewidthinner3] {
width: 173px!important;
float: none!important;
}
table[class*=button] {
float: none!important;
}
table[class*=button] td,
table[class*=button] td a {
font-size: 12px!important;
}
td[class*=oswaldfont] {
font-size: large!important;
}
}<body style="margin:0; padding:0">
<div>
<table class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="640">
<table class="devicewidth" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="640">
<tr>
<td align="center" style="font-size:1px; line-height:1px" height="58" width="640"> </td>
</tr>
<tr>
<td>
<p style="text-align: center">xyz</p>
</td>
</tr>
<tr>
<td align="center" style="font-size:1px; line-height:1px" height="18" width="640"> </td>
</tr>
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="350">
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:18px; color:#b2b2b2;line-height: 18px;text-align: center;">
Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40" width="640"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- pierwsza dwójka -->
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="640">
<table class="devicewidth" align="center" cellspacing="0" cellpadding="0" border="0" width="640" style="margin:0 auto;mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;">
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="317">
<tr>
<td align="left" width="640">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="270">
<tr>
<td width="640" height="26"> </td>
</tr>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">lorem ipsum</td>
</tr>
<tr>
<td width="640" align="left" style="font-family: Arial, Helvetica, sans-serif;font-weight: 300; font-size: 20px;line-height:24px; color: #606060; font-weight: bold; text-transform: uppercase;">lorem ipsum </td>
</tr>
<tr>
<td width="640" height="25"> </td>
</tr>
<tr>
<td align="left">
<table style="mso-table-lspace:0;mso-table-rspace:0;" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300; color: #606060;">Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="640" height="25"> </td>
</tr>
</table>
</td>
</tr>
</table>
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="10">
<tr>
<td align="left" width="10">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="10">
<tr>
<td width="10" height="26">
<hr style="
border:none;border-left:1px solid hsla(200, 10%, 50%,100);height:20px;width:1px;
">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="devicewidthinner" align="right" border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="317">
<tr>
<td align="left" width="640">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="270">
<tr>
<td width="640" height="26"> </td>
</tr>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">lorem ipsum
<span style="color: red;text-decoration: line-through;">
<span style="color: #606060; font-weight: bold; font-size: 18px;">
100
</span>
</span>
</td>
</tr>
<tr>
<td width="640" align="left" style="font-family: Arial, Helvetica, sans-serif;font-weight: 300; font-size: 14px;line-height:24px;"><span style="font-weight: bold;">lorem ipsum </span><span style="color: #e4001b; font-weight: bold; font-size: 18px;">lorem ipsum</span></td>
</tr>
<tr>
<td align="left">
<table style="mso-table-lspace:0;mso-table-rspace:0;" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">
<p>lorem ipsum:</p>
<p><span>lorem ipsum: </span> lorem ipsum</p>
<p><span>lorem ipsum: </span> lorem ipsum</p>
<p><span>lorem ipsum: </span>lorem ipsum</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="640" height="10"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="1280">
<table class="devicewidth" align="center" cellspacing="0" cellpadding="0" border="0" width="640" style="margin:0 auto;">
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="640">
<tr>
<td align="center" width="1280">
<a href="" style="font-family: Arial;color: #ffffff;font-size: 20px;background: #e4001b;padding: 5px 30px 5px 30px;text-decoration: none;">Zobacz</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
答案 0 :(得分：0)
虽然我已经更新了代码，但代码中使用的额外表太多了。请检查更新的代码段。希望它对你有所帮助。
<body style="margin:0; padding:0">
<table class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="640">
<table class="devicewidth" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td align="center" style="font-size:1px; line-height:1px" height="58" width="640"> </td>
</tr>
<tr>
<td>
<p style="text-align: center">xyz</p>
</td>
</tr>
<tr>
<td align="center" style="font-size:1px; line-height:1px" height="18" width="640"> </td>
</tr>
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="350">
<tbody>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:18px; color:#b2b2b2;line-height: 18px;text-align: center;">
Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis.
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="40" width="640"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- pierwsza dwójka -->
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="640">
<table class="devicewidth" align="center" cellspacing="0" cellpadding="0" border="0" width="640" style="margin:0 auto;mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;">
<tbody>
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td align="left" width="317">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="270">
<tbody>
<tr>
<td width="640" height="26"> </td>
</tr>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">lorem ipsum</td>
</tr>
<tr>
<td width="640" align="left" style="font-family: Arial, Helvetica, sans-serif;font-weight: 300; font-size: 20px;line-height:24px; color: #606060; font-weight: bold; text-transform: uppercase;">lorem ipsum </td>
</tr>
<tr>
<td width="640" height="25"> </td>
</tr>
<tr>
<td align="left">
<table style="mso-table-lspace:0;mso-table-rspace:0;" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300; color: #606060;">Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="640" height="25"> </td>
</tr>
</tbody>
</table>
</td>
<td align="left" width="1" valign="middle">
<span style="width:1px; height:20px; background:#000; display:block;"></span>
</td>
<td width="317" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="317">
<tbody>
<tr>
<td align="left" width="640">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="270">
<tbody>
<tr>
<td width="640" height="26"> </td>
</tr>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">lorem ipsum
<span style="color: red;text-decoration: line-through;">
<span style="color: #606060; font-weight: bold; font-size: 18px;">
100
</span>
</span>
</td>
</tr>
<tr>
<td width="640" align="left" style="font-family: Arial, Helvetica, sans-serif;font-weight: 300; font-size: 14px;line-height:24px;"><span style="font-weight: bold;">lorem ipsum </span><span style="color: #e4001b; font-weight: bold; font-size: 18px;">lorem ipsum</span></td>
</tr>
<tr>
<td align="left">
<table style="mso-table-lspace:0;mso-table-rspace:0;" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">
<p>lorem ipsum:</p>
<p><span>lorem ipsum: </span> lorem ipsum</p>
<p><span>lorem ipsum: </span> lorem ipsum</p>
<p><span>lorem ipsum: </span>lorem ipsum</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="640" height="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="1280">
<table class="devicewidth" align="center" cellspacing="0" cellpadding="0" border="0" width="640" style="margin:0 auto;">
<tbody>
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td align="center" width="1280">
<a href="" style="font-family: Arial;color: #ffffff;font-size: 20px;background: #e4001b;padding: 5px 30px 5px 30px;text-decoration: none;display: inline-block;">Zobacz</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
答案 1 :(得分：-1)
使用<hr>创建的行（始终）是水平的。
但是，您只需在左侧列添加右边框或在表格的右侧列添加左边框。
你的css看起来像这样：
table tr td:first-child {
border-right: 1px solid #000000;
}
因此，连续的每个第一个单元格都会获得正确的边框。为确保您在行之间没有间隙，您可能还需要在表格中添加以下属性：
table {
border-collapse: collapse;
border-spacing: 0;
}