本文介绍在不显式设置高度的前提下，利用 CSS Flexbox 和 100% 高度继承机制，使 内部的两个元素分别自动对齐到单元格顶部和底部的完整解决方案。 本文介绍在不显式设置高度的前提下，利用 CSS Flexbox 和 100% 高度继承机制，使 `` 内部的两个元素分别自动对齐到单元格顶部和底部的完整解决方案。在 HTML 表格布局中，若希望一个 单元格内同时容纳顶部和底部对齐的两行内容（例如标签+页脚信息），而又不能硬编码 height 或 min-height，常规的 vertical-align 或 position: absolute 往往失效——因为表格单元格的默认高度由内容撑开，其内部块级元素无法直接“感知”父级最终计算高度。核心难点在于：Flex 容器（如 .cell）若未获得明确高度，justify-content: space-between 将失去参照，导致上下元素紧贴排列，而非真正分置两端。✅ 正确解法是打通高度继承链：让 table → tr → td 逐层声明 height: 100%，从而为内部 Flex 容器提供可依赖的高度基准。此时，可直接将 display: flex 应用于 本身（无需额外包裹 ），大幅提升语义性与简洁性。以下是推荐实现代码： 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; } String top String bottom STARTEND ? 关键注意事项： height: 100% 在表格元素上生效的前提是：其父容器（如 body 或外层 div）具有明确高度（如 height: 100vh）或由内容自然撑开。若页面整体高度不确定，建议用 min-height: fit-content 或包裹一层 display: table 的容器兜底； 避免在 td 上同时使用 vertical-align 和 flex，二者逻辑冲突； 若需兼容旧版 IE（position: absolute + top: 0 / bottom: 0 并配合 position: relative 的 td； 现代项目中，如无强表格语义需求（如数据展示、无障碍要求），更推荐用 display: grid 或 flex 替代 ，获得更可控的布局能力。该方案兼顾语义清晰、代码精简与浏览器兼容性（Chrome/Firefox/Safari/Edge 均完美支持），是响应式表格辅助信息布局的可靠实践。