HTML 带有 rowspan 的电子邮件未正确显示

Question

我有一封 html 电子邮件 table 如下

这有以下 html 代码

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-69vs{font-size:100%;font-family:serif !important;}
</style>
<table class="tg">
  <tr>
    <th class="tg-69vs">Name</th>
    <th class="tg-031e">City</th>
    <th class="tg-031e">Place</th>
    <th class="tg-031e">Price</th>
  </tr>
  <tr>
    <td class="tg-031e" rowspan="3">acc</td>
    <td class="tg-031e" rowspan="2">CS</td>
    <td class="tg-031e">SJC</td>
    <td class="tg-031e">1</td>
  </tr>
  <tr>
    <td class="tg-031e">WDC</td>
    <td class="tg-031e">2<br></td>
  </tr>
  <tr>
    <td class="tg-031e">NS</td>
    <td class="tg-031e">WDC</td>
    <td class="tg-031e">3</td>
  </tr>
  <tr>
    <td class="tg-031e">acc2</td>
    <td class="tg-031e">NP</td>
    <td class="tg-031e">CA<br></td>
    <td class="tg-031e">4</td>
  </tr>
</table>

当我将其作为 HTML 电子邮件发送时，行跨度未正确应用。我在一些页面上看到要求避免使用行跨度，而是使用嵌套的 tables。我尝试转换为嵌套的 tables，但没有得到所需的 table。谁能帮我实现这个目标？

注意： rowspan 会因城市和地点而异

已编辑：

例如，我尝试使用 table 单行，行跨度为 5。代码如下

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>

<body>
<style type='text/css'>
.tg  {border-collapse:collapse;border-spacing:0;border-color:#ccc;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;background-color:#fff;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aaa;color:#fff;}
.tg .tg-4eph{background-color:#f9f9f9;}
.tg .tg-4epg{vertical-align:middle;}
.tg .tg-alert{background-color:#f38630;}
.tg .tg-header{background-color:#f38630;font-weight:bold;}
.tg .tg-bsv2{background-color:#f0f0f0;font-weight:bold; color: #000;text-align:center}
</style>
<table class="tg">
  <tr>
    <th class="tg-header">Name<br></th>
    <th class="tg-header">City</th>
    <th class="tg-header">Place</th>
    <th class="tg-header">Price<br></th>
  </tr>

  <tr>
    <td class="tg-4eph" rowspan=5>Blue</td>
      <tr>
        <td class="tg-4eph" rowspan=4>NS</td>
          <tr>
   <td class="tg-4eph">NW</td>
            <td></td>
     </tr>

    <tr>
   <td class="tg-4eph">CA</td>
            <td></td>
     </tr>

     <tr>
   <td class="tg-4eph">SJC</td>
   <td></td>
      </tr>
    
    <tr>
   <td class="tg-4eph">WDC</td>
   <td></td>
          </tr>
    </tr>

    <tr>
    <td class="tg-4eph" rowspan=1>CS</td>
    <td class="tg-4eph">SJC</td>
    <td></td>
  </tr>
    </tr>
</table>
</body>
</html>

结果如下

我在代码中将行跨度指定为 5。但是在输出中 table rowspan 只有 3。上面的示例代码有什么问题？

期望输出应该是

Answer 1

更改CSS，对特定单元格使用vertical-align:middle。

请从 td class="tg-031e" rowspan="3">acc
到

td class="tg-031e" rowspan="3" style="vertical-align:middle;">acc

Answer 2

Rowspan 不是最可靠的方法，但仍然可以相当有效地使用它。一旦我包裹在 DOCTYPE 和 HTML/HEAD/BODY 标签中，您的第一个示例似乎工作正常（在 EmailonAcid 中测试）。请记住，您的样式表在 Gmail 中不起作用，并且在某种程度上在其他电子邮件客户端中也不起作用。内联样式总是最好的。

第二个示例的问题是存在验证错误。请参阅下文，它适用于几乎所有电子邮件客户端（在 EOA 中测试）——样式表支持问题除外。

请让我知道您遇到问题的任何特定客户端，我可以尝试专门检查它们。

参见下面第二个示例的更正代码（请注意 TD 中的非中断 space 代码。一些电子邮件客户端会删除一个完全空的 TD，因此通过添加它，它会保留呈现更一致。）

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>

<body>
<style type='text/css'>
.tg  {border-collapse:collapse;border-spacing:0;border-color:#ccc;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;background-color:#fff;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aaa;color:#fff;}
.tg .tg-4eph{background-color:#f9f9f9;}
.tg .tg-4epg{vertical-align:middle;}
.tg .tg-alert{background-color:#f38630;}
.tg .tg-header{background-color:#f38630;font-weight:bold;}
.tg .tg-bsv2{background-color:#f0f0f0;font-weight:bold; color: #000;text-align:center}
</style>
<table class="tg">
  <tr>
    <th class="tg-header">Name<br></th>
    <th class="tg-header">City</th>
    <th class="tg-header">Place</th>
    <th class="tg-header">Price<br></th>
  </tr>

  <tr>
    <td class="tg-4eph" rowspan="5">Blue</td>
        <td class="tg-4eph" rowspan="4">NS</td>
        <td class="tg-4eph">NW</td>
        <td>&nbsp;</td>
        </tr>

          <tr>
            <td class="tg-4eph">CA</td>
            <td>&nbsp;</td>
          </tr>

          <tr>
            <td class="tg-4eph">SJC</td>
            <td>&nbsp;</td>
          </tr>

          <tr>
            <td class="tg-4eph">WDC</td>
            <td>&nbsp;</td>
          </tr>

       <tr>
          <td class="tg-4eph">CS</td>
          <td class="tg-4eph">SJC</td>
          <td>&nbsp;</td>
        </tr>
</table>
</body>
</html>

HTML 带有 rowspan 的电子邮件未正确显示

HTML emails with rowspan are not getting displayed correctly

html

html-table

html-email