创建均匀（间隔但可变宽度）的表格单元格

Question

我正在尝试为HTML电子邮件创建基于表格的导航栏。

标记为（JSFiddle Here）：

<tr>
  <td><a href="">Home</a></td>
  <td class="spacer"><div></div></td>
  <td><a href="">Alumni News</a></td>
  <td class="spacer"><div></div></td>
  <td><a href="">Careers</a></td>
  <td class="spacer"><div></div></td>
  <td><a href="">Firm News</a></td>
  <td class="spacer"><div></div></td>
  <td><a href="">Lawyer Recognitions</a></td>
  <td class="spacer"><div></div></td>
  <td><a href="">Who's New</a></td>
</tr>

它的呈现方式如下：

问题在于，虽然我希望导航链接的大小可变，我希望项目（和间隔符）之间的填充均为。使用table-layout: fixed只会使宽度相等，从而打破Lawyer Recognitions链接。真正的问题是我也使用表格单元格作为间隔符，但我无法想到一个适用于所有电子邮件客户端的聪明替代方案。

这大致是我的目标：

Answer 1

这似乎可以解决问题。

制作锚display:block并添加边距

＆＃13;

＆＃13;

.navbar {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  text-transform: uppercase;
  margin-bottom: 15px !important;
  font-size: 13px;
  font-family: sans-serif;
  text-align: center;
  width: 800px;
  margin: auto;
}
.navbar td {
  padding: 5px 0 !important;
  text-align: center;
  background: #ff0000;
}
a {
  text-decoration: none;
  display: block;
  background: #f09d09;
  margin: 0 1rem;
}

＆＃13;

<table class="navbar">
  <tr>
    <td><a href="">Home</a>
    </td>
    <td><a href="">Alumni News</a>
    </td>
    <td><a href="">Careers</a>
    </td>
    <td><a href="">Firm News</a>
    </td>
    <td><a href="">Lawyer Recognitions</a>
    </td>
    <td><a href="">Who's New</a>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

JSfiddle Demo