如何设置 <tr> 个标签的顺序相同?
How to set <tr> tags in equal order?
我卡住了,基本上我不明白为什么。
我需要将我的 <tr>
元素从右侧移动到其他更高的 <tr>
标签下方。
一个要求: 我正在为 outlook 创建邮件模板,所以我无法更改显示参数(正如我所读 here),因为它在Outlook 客户端。
我希望我在这里犯了一些我还没有看到的愚蠢错误,或者有人会向我建议一些更清晰的解决方案。
<table
border="0"
cellpadding="0"
cellspacing="0"
border-collapse="collapse"
width="768"
style="
font-family: 'Roboto', 'Montserrat', sans-serif;
background-color: #fff;
"
>
<tbody>
<tr>
<td style="padding: 20px 0">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="768"
style="font-size: 20px"
>
<tbody>
<tr>
<td width="25"></td>
<td style="padding: 10px 0; color: #b1b1b1">lorem ipsum:</td>
<td align="right" style="padding: 10px 0; color: #31424a">
lorem ipsum
</td>
<td width="25"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="padding-top: 10px"> // display: table or block does not work here
<td width="25px;"></td>
<td
width="100px;"
style="
padding-top: 10px;
vertical-align: top;
border-top: 1px solid #e3e3e3;
"
>
<img
src="https://www.bgastore.ie/cache/48/215x300-Ramar_Galleri1_Blocky_White_100x100_cm.jpg"
alt="photo"
width="100"
height="100"
style="padding-right: 3px"
/>
</td>
<td style="padding: 10px 0 20px 0; border-top: 1px solid #e3e3e3">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="618"
style="font-size: 15px; color: #595b5d"
>
<thead>
<tr style="color: #909090">
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">
<span style="color: #d2222d; border-bottom: 1px solid#d2222d"
>test</span
>
</td>
</tr>
<tr>
<td colspan="6" style="vertical-align: top; padding-top: 10px">
<span style="color: #909090; font-weight: 700; display: block"
>test</span
>
<span style="color: #d2222d; padding-top: 5px; display: block"
>test</span
>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
如果您只删除第一个内部 table 标签?
<table border="0" cellpadding="0" cellspacing="0" border-collapse="collapse" width="768" style="font-family: 'Roboto', 'Montserrat', sans-serif; background-color: #fff;">
<tbody>
<tr>
<td width="25"></td>
<td style="padding: 10px 0; color: #b1b1b1">lorem ipsum:</td>
<td align="right" style="padding: 10px 0; color: #31424a">
lorem ipsum
</td>
<td width="25"></td>
</tr>
<tr style="padding-top: 10px"> // display: table or block does not work here
<td width="25px;"></td>
<td width="100px;" style="
padding-top: 10px;
vertical-align: top;
border-top: 1px solid #e3e3e3;">
<img src="https://www.bgastore.ie/cache/48/215x300-Ramar_Galleri1_Blocky_White_100x100_cm.jpg" alt="photo" width="100" height="100" style="padding-right: 3px" />
</td>
<td style="padding: 10px 0 20px 0; border-top: 1px solid #e3e3e3">
<table border="0" cellpadding="0" cellspacing="0" width="618" style="font-size: 15px; color: #595b5d">
<thead>
<tr style="color: #909090">
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">
<span style="color: #d2222d; border-bottom: 1px solid#d2222d">test</span>
</td>
</tr>
<tr>
<td colspan="6" style="vertical-align: top; padding-top: 10px">
<span style="color: #909090; font-weight: 700; display: block">test</span>
<span style="color: #d2222d; padding-top: 5px; display: block">Back</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
通过注释掉下面的内容,您可以有效地将它们放在同一个 tbody 中,只是将 trs 分开。似乎可以根据需要将其滑过。
<table
border="0"
cellpadding="0"
cellspacing="0"
border-collapse="collapse"
width="768"
style="
font-family: 'Roboto', 'Montserrat', sans-serif;
background-color: #fff;
"
>
<tbody>
<tr>
<td style="padding: 20px 0">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="768"
style="font-size: 20px">
<tbody>
<tr>
<td width="25"></td>
<td style="padding: 10px 0; color: #b1b1b1">lorem ipsum:</td>
<td align="right" style="padding: 10px 0; color: #31424a">
lorem ipsum
</td>
<td width="25"></td>
</tr>
<!-- </tbody>
</table>
</td>
</tr> -->
<tr style="padding-top: 10px"> // display: table or block does not work here
<td width="25px;"></td>
<td
width="100px;"
style="
padding-top: 10px;
vertical-align: top;
border-top: 1px solid #e3e3e3;
"
>
<img
src="https://www.bgastore.ie/cache/48/215x300-Ramar_Galleri1_Blocky_White_100x100_cm.jpg"
alt="photo"
width="100"
height="100"
style="padding-right: 3px"
/>
</td>
<td style="padding: 10px 0 20px 0; border-top: 1px solid #e3e3e3">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="618"
style="font-size: 15px; color: #595b5d"
>
<thead>
<tr style="color: #909090">
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">
<span style="color: #d2222d; border-bottom: 1px solid#d2222d"
>test</span
>
</td>
</tr>
<tr>
<td colspan="6" style="vertical-align: top; padding-top: 10px">
<span style="color: #909090; font-weight: 700; display: block"
>test</span
>
<span style="color: #d2222d; padding-top: 5px; display: block"
>Back</span
>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
我卡住了,基本上我不明白为什么。
我需要将我的 <tr>
元素从右侧移动到其他更高的 <tr>
标签下方。
一个要求: 我正在为 outlook 创建邮件模板,所以我无法更改显示参数(正如我所读 here),因为它在Outlook 客户端。
我希望我在这里犯了一些我还没有看到的愚蠢错误,或者有人会向我建议一些更清晰的解决方案。
<table
border="0"
cellpadding="0"
cellspacing="0"
border-collapse="collapse"
width="768"
style="
font-family: 'Roboto', 'Montserrat', sans-serif;
background-color: #fff;
"
>
<tbody>
<tr>
<td style="padding: 20px 0">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="768"
style="font-size: 20px"
>
<tbody>
<tr>
<td width="25"></td>
<td style="padding: 10px 0; color: #b1b1b1">lorem ipsum:</td>
<td align="right" style="padding: 10px 0; color: #31424a">
lorem ipsum
</td>
<td width="25"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="padding-top: 10px"> // display: table or block does not work here
<td width="25px;"></td>
<td
width="100px;"
style="
padding-top: 10px;
vertical-align: top;
border-top: 1px solid #e3e3e3;
"
>
<img
src="https://www.bgastore.ie/cache/48/215x300-Ramar_Galleri1_Blocky_White_100x100_cm.jpg"
alt="photo"
width="100"
height="100"
style="padding-right: 3px"
/>
</td>
<td style="padding: 10px 0 20px 0; border-top: 1px solid #e3e3e3">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="618"
style="font-size: 15px; color: #595b5d"
>
<thead>
<tr style="color: #909090">
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">
<span style="color: #d2222d; border-bottom: 1px solid#d2222d"
>test</span
>
</td>
</tr>
<tr>
<td colspan="6" style="vertical-align: top; padding-top: 10px">
<span style="color: #909090; font-weight: 700; display: block"
>test</span
>
<span style="color: #d2222d; padding-top: 5px; display: block"
>test</span
>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
如果您只删除第一个内部 table 标签?
<table border="0" cellpadding="0" cellspacing="0" border-collapse="collapse" width="768" style="font-family: 'Roboto', 'Montserrat', sans-serif; background-color: #fff;">
<tbody>
<tr>
<td width="25"></td>
<td style="padding: 10px 0; color: #b1b1b1">lorem ipsum:</td>
<td align="right" style="padding: 10px 0; color: #31424a">
lorem ipsum
</td>
<td width="25"></td>
</tr>
<tr style="padding-top: 10px"> // display: table or block does not work here
<td width="25px;"></td>
<td width="100px;" style="
padding-top: 10px;
vertical-align: top;
border-top: 1px solid #e3e3e3;">
<img src="https://www.bgastore.ie/cache/48/215x300-Ramar_Galleri1_Blocky_White_100x100_cm.jpg" alt="photo" width="100" height="100" style="padding-right: 3px" />
</td>
<td style="padding: 10px 0 20px 0; border-top: 1px solid #e3e3e3">
<table border="0" cellpadding="0" cellspacing="0" width="618" style="font-size: 15px; color: #595b5d">
<thead>
<tr style="color: #909090">
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">
<span style="color: #d2222d; border-bottom: 1px solid#d2222d">test</span>
</td>
</tr>
<tr>
<td colspan="6" style="vertical-align: top; padding-top: 10px">
<span style="color: #909090; font-weight: 700; display: block">test</span>
<span style="color: #d2222d; padding-top: 5px; display: block">Back</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
通过注释掉下面的内容,您可以有效地将它们放在同一个 tbody 中,只是将 trs 分开。似乎可以根据需要将其滑过。
<table
border="0"
cellpadding="0"
cellspacing="0"
border-collapse="collapse"
width="768"
style="
font-family: 'Roboto', 'Montserrat', sans-serif;
background-color: #fff;
"
>
<tbody>
<tr>
<td style="padding: 20px 0">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="768"
style="font-size: 20px">
<tbody>
<tr>
<td width="25"></td>
<td style="padding: 10px 0; color: #b1b1b1">lorem ipsum:</td>
<td align="right" style="padding: 10px 0; color: #31424a">
lorem ipsum
</td>
<td width="25"></td>
</tr>
<!-- </tbody>
</table>
</td>
</tr> -->
<tr style="padding-top: 10px"> // display: table or block does not work here
<td width="25px;"></td>
<td
width="100px;"
style="
padding-top: 10px;
vertical-align: top;
border-top: 1px solid #e3e3e3;
"
>
<img
src="https://www.bgastore.ie/cache/48/215x300-Ramar_Galleri1_Blocky_White_100x100_cm.jpg"
alt="photo"
width="100"
height="100"
style="padding-right: 3px"
/>
</td>
<td style="padding: 10px 0 20px 0; border-top: 1px solid #e3e3e3">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="618"
style="font-size: 15px; color: #595b5d"
>
<thead>
<tr style="color: #909090">
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
<th align="left">test</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">test</td>
<td style="vertical-align: top; padding: 10px 0 0 0">
<span style="color: #d2222d; border-bottom: 1px solid#d2222d"
>test</span
>
</td>
</tr>
<tr>
<td colspan="6" style="vertical-align: top; padding-top: 10px">
<span style="color: #909090; font-weight: 700; display: block"
>test</span
>
<span style="color: #d2222d; padding-top: 5px; display: block"
>Back</span
>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>