html - 创建均匀(间隔但宽度可变)的表格单元格

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只会使所有内容的宽度相等，从而破坏律师认可链接。真正的问题是我也使用表格单元格作为间隔符，但我想不出一个适用于所有电子邮件客户端的聪明替代方案。

这大致就是我想要的:

Answer 1

这似乎可以解决问题。

使 anchor display:block并添加边距

.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;
}

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

JSfiddle Demo