caption-side: bottom 仅让标题逻辑位于表格底部，实际显示需满足四个条件：caption 必须是 table 的直接子元素；display 保持 table-caption；text-align 显式设置水平对齐；用 margin-top 控制底部间距。
caption-side: bottom 能让标题出现在表格底部，但“出现”不等于“对齐到位”——很多人写了这行 CSS 却发现标题缩在左下角、没居中、甚至完全看不见，根本原因是没处理好布局约束和继承干扰。
caption 必须是
的直接子元素
这是最常被忽略的硬性前提。caption 标签必须作为 的第一个或最后一个子节点，不能嵌套在 、 或其他容器里。一旦被包裹，
caption-side 直接失效，浏览器会忽略该声明。
caption-side 只管上下，text-align 才管左右
caption-side: bottom 仅决定标题在表格上方还是下方，它**不控制水平对齐方式**。默认居中是规范行为，但这个“默认”只在 caption 元素自身未继承父级 text-align 时才生效。如果 设了 text-align: left，而你没给 caption 显式设置对齐，标题就会跟着缩到左下角。
- ✅ 底部居中：
caption { text-align: center; }（显式声明，不依赖默认）
- ✅ 底部右对齐：
caption { text-align: right; }
- ❌ 仅写
caption-side: bottom，不设 text-align → 行为不可控，受父级继承影响
- ❌ 用
margin-left 或 padding-left “推”位置 → 破坏语义结构，屏幕阅读器无法正确播报
display 和 position 会破坏 caption 布局流
caption 默认是 display: table-caption，这是它能参与表格布局流的基础。一旦被改成 inline、block，或加了 position: absolute、float，它就脱离表格逻辑，caption-side 失效。
- ✅ 安全写法：
caption { display: table-caption; }（显式重申，防被覆盖）
- ❌ 避免给
caption 加 position: absolute 或 float: left
- ❌ 避免把
改成 display: grid 或 display: flex —— 这会让整个表格语义坍塌，caption-side 失去作用环境
- ? 验证方法：打开开发者工具，检查
caption 计算后的 display 值是否仍是 table-caption
底部间距容易“粘连”，靠 margin-top 控制
caption-side: bottom 只定义逻辑位置，实际视觉距离由 caption 的 margin-top 和表格自身的 border-spacing、border-collapse 共同决定。尤其当 border-collapse: collapse 时，标题可能紧贴表格底边，看起来像没到底部。
htmlppt.skill
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
下载
- ✅ 推荐加间距：
caption { margin-top: 0.5em; }（注意是 margin-top，不是 margin-bottom）
- ✅ 若表格有
border-bottom，可在 或 上加 padding-bottom 留空，比依赖 caption 的 margin 更稳定
- ❌ 避免同时设
table { border-spacing: 0; } 和 caption { margin: 0; } → 视觉上容易“粘连”
真正难的不是写那行 caption-side: bottom，而是确保它运行在标准的表格语义环境中：caption 是 table 的直系子元素、display 没被改写、text-align 显式声明、间距靠 margin-top 调整——漏掉任意一环，都可能让标题“消失”在角落里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
