代码之家  ›  专栏  ›  技术社区  ›  sosick

如何按相同的顺序设置标签?

mailing html-table css html
  •  1
  • sosick  · 技术社区  · 4 年前

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

    我得把我的行李搬走 <tr> 右侧为elemnent,另一侧下方为directky <tr> 标签,它们更高。

    enter image description here

    一个要求: 我正在为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>
    2 回复  |  直到 4 年前
        1
  •  2
  •   mplungjan    4 年前

    如果你移除第一个内表标签? 

    <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>
        2
  •  1
  •   tstrand66    4 年前

    通过注释下面的内容,你可以有效地将它们放在同一个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>
    推荐文章
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    1 年前
    Mass  ·  如何在Tailwind CSS v4中创建配置
    1 年前
    magenta placenta  ·  将css变量合并为一个变量
    1 年前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    1 年前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    1 年前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    1 年前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    1 年前
    Ben Halicki  ·  带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列
    1 年前
    Luckkks  ·  过渡色工作不正常
    1 年前
    ModernEraCaveman  ·  如何对齐我的Bootstrap容器以适应网页的整个宽度?
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号