均匀地创建（间隔但宽度可变）table 个单元格

Question

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

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

它的渲染是这样的：

问题是，虽然我希望导航 links 的大小可变，但 我希望项目之间的填充（和垫片）均匀。使用 table-layout: fixed 只是让所有东西都等宽，打破了 Lawyer Recognitions link。真正的问题是我也在使用 table 单元作为间隔符，但我想不出一个适用于所有电子邮件客户端的聪明替代方案。

这就是我的大致目标：

Answer 1

这似乎可以解决问题。

制作锚点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

均匀地创建（间隔但宽度可变）table 个单元格

Creating evenly (spaced but variable width) table cells

html

css

html-email