以不同方式对齐表格单元格的内容

Question

我有一个表，其中一行的第一个单元格（td）包含填充。现在的问题是该行中的第二个单元格，它以某种方式继承了前一个单元格的填充，这不是我想要的

td{
  border:3px solid black;
}
.a>span {
  display: block;
  padding: 20px;
}

.b {
  vertical-align: top;
}

<table>
  <tr>
    <td class="a"><span>Bar foo</span></td>
    <td class="b">Bar foo</td>
  </tr>
</table>

所以问题是：如何将第二个单元格中的文本与顶部对齐？