如何以相同的顺序设置 <tr> 标签？

Question

我卡住了，基本上我不明白为什么。

我需要将我的<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>

Answer 1

通过注释掉下面的内容，您可以有效地将它们放在同一个 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>

Answer 2

如果你只是删除第一个内表标签？

<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>