Question

我有一张带有表格的html电子邮件，如下所示

这有以下HTML代码

＆＃13;

##teamcity[setParameter name='env.HOSTNAMES' value='['12R214PS93A8G', '12R214WB93A8G', '12R214DS93A8G', '12R214AG93A8G']'

##teamcity[setParameter name='env.HOSTNAMES' value='[|'12R214PS93A8G|', |'12R214WB93A8G|', |'12R214DS93A8G|', |'12R214AG93A8G|'|]']

＆＃13;

当我将其作为HTML电子邮件发送时，行窗口未正确应用。我在一些页面中看到过要求避免使用rowpans而是使用嵌套表。我尝试转换成嵌套表，但我没有得到所需的表。任何人都可以帮我实现这个目标吗？

注意：行距将根据城市和地点而变化

编辑：

例如，我尝试了一个单行的表，行数为5。代码如下

＆＃13;

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

＆＃13;

这给我的结果如下

我在代码中将rowspan设为5。但是在输出表中，rowspan只有3.上面的示例代码有什么问题？

欲望输出应

Answer 1

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

请改变 td class =＆＃34; tg-031e＆＃34;行跨度=＆＃34; 3＆＃34;＆GT; ACC
到

td class =＆＃34; tg-031e＆＃34;行跨度=＆＃34; 3＆＃34;风格=＆＃34;垂直对齐：中部;＆＃34;＆GT; ACC

Answer 2

Rowspan is not the most reliable way, but it can still be used fairly effectively. Your first example seemed to work fine (tested in EmailonAcid) once I wrapped in DOCTYPE and HTML/HEAD/BODY tags. Please remember though that your stylesheet will not work in Gmail and to one degree or another in other email clients as well. It is always best to inline styles.

The issue with your second example was that there was validation errors. Please see below, which works in almost all email clients (tested in EOA) - with the exception of the stylesheet support issue.

Please let me know any specific clients you were seeing issues in and I can try and check them out specifically.

See below for corrected code on second example (please note the non-breaking space code inside the TDs. Some email clients will delete a completely empty TD, so by adding this in, it keeps the rendering more consistent.)

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

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

2 个答案: