本文介绍在未知高度的 单元格内，利用 CSS Flexbox 实现“上对齐一行 + 下对齐一行”的布局方案，关键在于让表格结构（table/tr/td）继承 100% 高度以激活 flex 布局的纵向空间分配能力。
本文介绍在未知高度的 `
在响应式或内容驱动的表格布局中，常需在某个 <td> 内同时展示顶部提示信息和底部操作标签（如“编辑”“删除”），而单元格高度又完全由另一列（如长文本、多行内容）动态撑开——此时若直接对 <code><td> 内部容器使用 <code>display: flex; flex-direction: column; justify-content: space-between，往往失效：因为默认情况下，<table>、<code><tr> 和 <code><td> 的高度是“包裹内容”的，不会自动将剩余空间传递给子元素，导致 flex 容器无法感知可用高度，<code>justify-content: space-between 失效。
解决方案的核心是显式赋予表格结构高度继承能力：为 table、tr 和 td 同时设置 height: 100%。这并非强制固定高度，而是让它们“尽可能伸展以填满父容器高度”。当表格处于常规文档流中且无明确高度限制时，该声明会触发浏览器将可用垂直空间逐层向下传递，最终使 <td> 获得由对侧列内容撑起的实际高度，从而让其内部 flex 容器能正确计算并分配空间。<p>以下是推荐实现方式（简洁高效，无需额外 wrapper <code><div>）：<pre class="brush:php;toolbar:false;"><table>
<tr>
<td class="cell">
<span class="top">String top</span>
<span class="bottom">String bottom</span>
</td>
<td>
START<br><br><br><br><br><br><br><br><br>END
</td>
</tr>
</table></pre><pre class="brush:php;toolbar:false;">/* 关键：启用高度继承链 */
table, tr, td {
height: 100%;
}
td {
border: 1px solid #999;
vertical-align: top; /* 可选，确保内容对齐基准一致 */
}
/* 直接在 td 上启用 flex 布局 */
.cell {
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid #007bff; /* 视觉标识，可移除 */
padding: 4px; /* 可选内边距 */
}
.top, .bottom {
margin: 0; /* 重置默认外边距 */
}
.top {
align-self: flex-start;
}
.bottom {
align-self: flex-end;
}</pre><p>✅ <strong>优势说明</strong>： </p>
<ul><li>无需嵌套 <code><div class="cell">，语义更简洁，DOM 更轻量； <li>
<code>height: 100% 在无显式父高时，实际依赖于表格整体被内容撑开的高度，完全保持流式特性；
position: relative + position: absolute 方案，但本文聚焦标准现代方案。⚠️ 注意事项：
- 确保表格未被包裹在
overflow: hidden或max-height限制的容器中，否则高度继承可能被截断； - 若表格位于 Flex/Grid 容器中，请确认其父容器也允许高度自然扩展（例如
align-items: stretch）； - 避免在
.cell上同时设置min-height或height，以免覆盖100%继承逻辑。
通过这一模式，你可以在任意动态高度的表格单元格中，精准、可靠地实现顶部与底部双行内容的分离对齐，兼顾语义性、可维护性与渲染性能。
