具有行跨度的 HTML 电子邮件无法正确显示答案

【问题标题】：HTML emails with rowspan are not getting displayed correctly具有行跨度的 HTML 电子邮件无法正确显示
【发布时间】：2015-07-29 00:44:10
【问题描述】：

我有一个带有如下表格的 html 电子邮件

这有以下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 电子邮件发送时，行跨度未正确应用。我在一些页面中看到要求避免使用行跨度，而是使用嵌套表。我尝试转换为嵌套表，但没有得到所需的表。谁能帮我实现这个目标？

注意：行跨度因城市和地点而异

已编辑：

例如，我尝试使用具有 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。但是在输出表中rowspan只有3。上面的示例代码有什么问题？

愿望输出应该是

【问题讨论】：

您的 html 代码给我的结果与图像相同（垂直对齐除外），您想要的结果是什么？
@Utkarsh：请参阅上面我编辑的答案

标签： html html-table html-email

【解决方案1】：

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

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

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

请参阅下面的第二个示例的更正代码（请注意 TD 内的不间断空格代码。一些电子邮件客户端会删除一个完全空的 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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

我认为 OP 询问的是行跨度而不是元素的垂直对齐。不是吗？
OP 询问电子邮件 HTML 不正确。 Rowspan 在电子邮件中无法正常工作。