无法跨表格单元格垂直对齐文本（HTML）

我在HTML表格单元格中嵌套了HTML表格。我试图将内部表格的内容与外部表格单元格的顶部和底部垂直对齐，但文本间距不同：

HTML代码：

<table style="position:absolute;">
<tr style="position:absolute;top:30px;">
    <td>
        <table>
            <tr>
                <td>79. Sushi Regular</td>
            </tr>
            <tr>
                <td>7 pieces sushi & 1 California roll.</td>
            </tr>
        </table>
    </td>
</tr>
<tr>
    <td>
        <table>
            <tr>
                <td style="padding:8px 0 8px 0;">$17.95</td>
            </tr>
            <tr>
                <td>
                    <div style="display:inline-block;">
                        <p>Add to Cart</p>
                    </div>
                </td>
            </tr>
        </table>
    </td>
</tr>

---

如果您希望文本位于每个td的顶部，请为每个td添加一个div，并将内容放入div

td div{height:100%;}

---

现在，您可以更好地管理您想要的方式。

请不要使用表格进行内容对齐。这对于CSS flex布局来说是一项伟大的工作

考虑以下示例：

HTML:

---

CSS flex布局的演示指南可在此处找到：

在您希望内容垂直对齐的td中，使用或

如果您确实希望以任何方式使用表格，则可以将文本的行高设置为父td的高度

您必须执行以下操作：

td{
height:60px;
}

td span{
line-height:60px;
}

---

或者，您可以尝试将td内部的跨距设置为内联块，并设置其属性“垂直对齐：中间”或“尝试顶部/底部”，我不太使用它们，因此有时它们的行为会不规则，请尝试不同的值，看看是否有帮助！如果您要尝试此方法，请给跨度一个小于其父跨度的高度。

您必须使用表格吗？Flex就是为了这个purpose@EdDogan不，这是电子邮件的HTML我们不能使用flex，这是电子邮件的HTML使用flex处理电子邮件有什么问题？flex在电子邮件客户端中不受普遍支持，例如Outlook：

.outer-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: stretch;
}

.box {
  background: #ddd;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 200px;
  margin: 1px;
  padding: 5px;
}

td{
height:60px;
}

td span{
line-height:60px;
}