为什么我的img在表格单元格中留下1px的未填充空间？

Question

我正在写一些HTML以邮寄方式以编程方式发送给内部用户。他们都使用Outlook 2016.（编码Outlook是可怕的，因为像CSS背景这样简单的东西不起作用。因此我一直坚持编码HTML，就像它的90年代一样。 ）

内容是一种流程图，它需要在邮件客户端中可见，因为用户不会点击链接将其带到外部页面。因为它是Outlook我正在用表格做所有事情。基本上，所有图形都是表格单元格，但我需要添加箭头。我通过对细胞的背景进行着色来实现这一目标，然后对其进行加盖＆＃34;透明箭头镂空上有白色。

我几乎就在那里，除了一个非常烦人的错误，在某些箭头上，但不是所有箭头，箭头左边有一条1px线。 （图中的红色箭头指向它们。）

我的箭头图像的宽度与2 x我的列宽相同，代码如下所示，使用2个箭头创建一行（我使用36列，因为设计基于12列网格，但后来我需要能够进一步拆分细胞以制作箭头）：

＆＃13;

＆＃13;

body {
  font-family: arial, verdana, sans-serif;
  font-size: 6px;
}

table {
  border-collapse: collapse;
  width: 935px;
  margin: 0px auto;
}

th {
  width: 26px;
}

td.shaft {
  background-color: #82d0f5;
  padding: 0px;
  vertical-align:bottom;
  height: 24px;
  border-left: 1px solid white;
}
td {
  text-align: center;
  font-family: arial, verdana, sans-serif;
  font-size: 14px;
  background-color: #82d0f5;
  height: 48px;
  border-right: 6px solid white;
  padding: 6px;
  word-break: break-all;
}
td a {
  text-decoration: none;
  color:white;
}

td.divider {
  height: 24px;
  background-color: #f7c437;
}
.title {
  font-size: 36px;
  background-color: white;
  text-align:left;
  font-weight:bold;
  color: #291f68;
}
.highlight {
  color: #55abe6;
}
img {
  width:100%;
  display:block;
}
td.summary {
  text-align: left;
  background-color: white;
  padding-bottom:36px;
  word-break: normal;
}
td.blank {
  background-color: white;
  padding:0;
  height: 24px;
  vertical-align: top;
  font-size: 12px;
}

＆＃13;

<table>
  <tr>
    <th></th><th></th><th></th>
    <th></th><th></th><th></th>
    <th></th><th></th><th></th>
    <th></th><th></th><th></th>
    <th></th><th></th><th></th>
    <th></th><th></th><th></th>
    <th></th><th></th><th></th>
    <th></th><th></th><th></th>
    <th></th><th></th><th></th>
    <th></th><th></th><th></th>
    <th></th><th></th><th></th>
    <th></th><th></th><th></th>
  </tr>
  
  <tr>
    <td colspan=18>Are just Powerpoint toolbars missing? <br /><a href='http://www.google.com'>Y - Click Here</a></td>
    <td class='blank' colspan=8></td><td class='shaft' colspan=2></td><td class='blank' colspan=8></td>
  </tr>
  <!-- Row with 2 arrows -->
  <tr>
    <td class='blank' colspan=8></td><td class='shaft' colspan=2>N</td><td class='blank' colspan=8></td>
    <td class='blank' colspan=8></td><td class='shaft' colspan=2>N</td><td class='blank' colspan=8></td>
  </tr>
  <tr>
    <td class='blank' colspan=8></td><td class='shaft' colspan=2><img src='http://www.amstaffportal.com/images/email_resources/arrowhead.png' /></td><td class='blank' colspan=8></td>
    <td class='blank' colspan=8></td><td class='shaft' colspan=2><img src='http://www.amstaffportal.com/images/email_resources/arrowhead.png' /></td><td class='blank' colspan=8></td>
  </tr>
  <!-- End Row with 2 arrows -->
  <tr>
    <td colspan=36>Did this fix your issue? </td>
  </tr>
  <!-- Row with 3 arrows -->
  <tr>
    <td class='blank' colspan=5></td><td class='shaft' colspan=2></td><td class='blank' colspan=5></td>
    <td class='blank' colspan=5></td><td class='shaft' colspan=2></td><td class='blank' colspan=5></td>
    <td class='blank' colspan=5></td><td class='shaft' colspan=2></td><td class='blank' colspan=5></td>
  </tr>
  <tr>
    <td class='blank' colspan=5></td><td class='shaft' colspan=2><img src='http://www.amstaffportal.com/images/email_resources/arrowhead.png' /></td><td class='blank' colspan=5></td>
    <td class='blank' colspan=5></td><td class='shaft' colspan=2><img src='http://www.amstaffportal.com/images/email_resources/arrowhead.png' /></td><td class='blank' colspan=5></td>
    <td class='blank' colspan=5></td><td class='shaft' colspan=2><img src='http://www.amstaffportal.com/images/email_resources/arrowhead.png' /></td><td class='blank' colspan=5></td>
  </tr>
  <!-- End Row with 3 arrows -->
  <tr>
    <td colspan=12 style='background-color:#70b74b; color:white'>Yes - close the call</td>
    <td colspan=12 style='background-color:#e9531b; color:white'>No - I need more help</td>
    <td colspan=12 style='background-color:#2f7de1; color:white'>This was not relevant <br /> to my issue</td>
  </tr>	
</table>

＆＃13;

＆＃13;

＆＃13;

如何摆脱左边那条麻烦的线？