本文介绍在不显式设置高度的前提下，利用 CSS Flexbox 和 100% 高度继承机制，使 内部的两个元素分别自动对齐到单元格顶部和底部的完整解决方案。
本文介绍在不显式设置高度的前提下，利用 css flexbox 和 100% 高度继承机制，使 `
在 HTML 表格布局中，若希望一个 <td> 单元格内同时容纳顶部和底部对齐的两行内容（例如标签+页脚信息），而<strong>又不能硬编码 <code>height 或 min-height，常规的 vertical-align 或 position: absolute 往往失效——因为表格单元格的默认高度由内容撑开，其内部块级元素无法直接“感知”父级最终计算高度。
核心难点在于：Flex 容器（如 .cell）若未获得明确高度，justify-content: space-between 将失去参照，导致上下元素紧贴排列，而非真正分置两端。
✅ 正确解法是打通高度继承链：让 table → tr → td 逐层声明 height: 100%，从而为内部 Flex 容器提供可依赖的高度基准。此时，可直接将 display: flex 应用于 <td> 本身（无需额外包裹 <code><div class="cell">），大幅提升语义性与简洁性。<p>以下是推荐实现代码：</p><pre class="brush:php;toolbar:false;"><style>
table, tr, td {
border: 1px solid #ccc;
height: 100%; /* 关键：激活高度继承 */
}
td:first-child {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 8px; /* 可选，提升可读性 */
}
.top { font-weight: bold; color: #2c3e50; }
.bottom { font-size: 0.85em; color: #7f8c8d; }
</style>
<table>
<tr>
<td>
<div class="top">String top</div>
<div class="bottom">String bottom</div>
</td>
<td>
START<br><br><br><br><br><br><br><br><br>END
</td>
</tr>
</table></pre><p>? <strong>关键注意事项：</strong> </p>
<ul>
<li>
<code>height: 100% 在表格元素上生效的前提是：其父容器（如 body 或外层 div）具有明确高度（如 height: 100vh）或由内容自然撑开。若页面整体高度不确定，建议用 min-height: fit-content 或包裹一层 display: table 的容器兜底；
td 上同时使用 vertical-align 和 flex，二者逻辑冲突； top: 0 / bottom: 0 并配合 position: relative 的 td； display: grid 或 flex 替代 <table>，获得更可控的布局能力。<p>该方案兼顾语义清晰、代码精简与浏览器兼容性（Chrome/Firefox/Safari/Edge 均完美支持），是响应式表格辅助信息布局的可靠实践。</p>
</table>
