align-content 对 <table> 完全无效，因其仅适用于 Flex 或 Grid 布局；表格使用 table layout mode，既非 flex 容器也非 grid 容器，该属性被浏览器直接忽略。
align-content 在 HTML 表格（<table>）中**完全无效**，它不作用于表格布局，也不被浏览器识别为表格元素的合法样式属性。
为什么 align-content 对 <table> 没反应
表格元素默认使用的是 table layout mode，不是 Flexbox 或 Grid。CSS 的 align-content 只在以下两种布局中生效：
- Flex 容器：必须同时满足
display: flex+flex-wrap: wrap+ 交叉轴有富余空间 - Grid 容器：必须有多个行轨道（
grid-auto-rows或grid-template-rows）且容器高度大于内容总高
而 <table> 元素既不是 flex 容器，也不是 grid 容器——它的 display 值是 table（或 inline-table），align-content 在此上下文中被浏览器直接忽略，Computed 面板里甚至不会出现该属性。
想让多行表格内容“整体分布”，该用什么
表格本身没有“多行内容整体对齐”的原生机制；所谓“多行”，实际是指 <tr> 行。控制这些行在父容器中的垂直分布，要靠表格的父容器，而不是表格自身：
立即学习“前端免费学习笔记（深入）”；
- 把
<table>包进一个div，设该div为 flex 容器：display: flex; flex-direction: column; align-content: center;→ 无效（align-content对单个 flex item 无意义） - 正确做法是用
align-items或justify-content控制表格这个“整体 item”在父容器中的位置 - 若目标是让多行
<tr>在固定高容器内垂直分布（如首行顶、末行底），需放弃原生表格，改用display: grid或display: flex; flex-wrap: wrap模拟表格结构
替代方案：用 Grid 模拟表格并启用 align-content
如果你确实需要 align-content 的行为（比如 space-between 分布多行），又希望保持表格语义或结构，最可行路径是：
- 用
div+display: grid替代<table>，显式定义列数和行高 - 设置固定容器高度（如
height: 400px） - 启用
grid-auto-rows并确保生成多行（项目数 > 列数） - 此时
align-content: space-between才会生效
示例：
.grid-table {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 60px;
height: 300px;
align-content: space-between;
}
.grid-table > div { border: 1px solid #ccc; }
最后提醒：别混淆 align-content 和表格内部对齐
表格内单元格文本对齐用的是 text-align（水平）和 vertical-align（垂直），例如：
-
td { vertical-align: top; }→ 让每行单元格内容顶部对齐 -
table { margin: 0 auto; }→ 让整个表格在页面中水平居中 - 没有 “让第2、3、4行在容器里等距分布” 的纯 CSS 表格方案 —— 这本身就是非表格布局的需求
真正卡住的点往往不是写错值，而是试图在一个不支持该属性的上下文里强行使用它。先确认容器是不是 Flex/Grid，再决定要不要用 align-content。
