colspan属性必须写在td或th标签内，仅用text-align:center无法跨列，需先用colspan合并列再对合并单元格设text-align:center；其值不能超过当前行总列数，且text-align不继承，须直接作用于该单元格。
colspan 属性必须写在 td 或 th 标签里，不能只靠 text-align
单纯给 td 加 style="text-align:center" 只会让内容在「当前单元格」内水平居中，不会跨列。真正实现“跨列居中”，本质是先用 colspan 合并多个列，再让合并后的单元格内容居中。
常见错误是：写了 colspan="3" 却没检查实际表格列数是否足够——比如一行只有 2 个 td，却在另一个 td 上设 colspan="3"，会导致表格结构错乱、后续列错位甚至渲染异常。
-
colspan的值必须 ≤ 当前行总列数（即该tr中所有td/th的colspan值之和） - 如果某行用了
colspan="2"，那它后面只能再放 1 个普通td（假设整行共 3 列） - 推荐手写时先画草图或数清每行的“逻辑列总数”，再分配
colspan
text-align: center 必须作用于合并后的单元格本身
text-align 不继承自父级 table 或 tr，它只对直接设置的元素生效。所以即使你给整个 table 设了 text-align: center，colspan 单元格里的文字仍可能左对齐——除非该单元格自己也明确声明了 text-align: center。
更隐蔽的问题是：如果用了 CSS reset 或框架样式（如 Bootstrap），td 的默认 text-align 可能被重置为 left，此时仅靠 HTML 属性 align="center"（已过时）也不可靠。
- 优先用内联样式：
<td colspan="3" style="text-align:center">标题</td> - 或定义类：
<td colspan="3" class="header-cell">标题</td>，配合.header-cell { text-align: center; } - 避免只写
<tr style="text-align:center">——这无效 <h3>vertical-align: middle 要搭配 line-height 或 padding 才真“垂直居中”</h3> <p><code>vertical-align: middle确实能让文本在单元格内垂直居中，但它依赖行高（line-height）和字体大小的关系。如果单元格内容是单行短文本，通常没问题；但遇到多行文本、图片或设置了固定height的单元格，vertical-align可能失效或表现不一致。尤其注意：当
table使用table-layout: fixed时，vertical-align行为更稳定，但需同时确保td没有height冲突或overflow截断。- 安全做法：给带
colspan的单元格加style="text-align:center; vertical-align:middle; padding: 8px 0;" - 避免单独设
height，改用min-height+padding控制视觉高度 - 若内容含图标或按钮，
vertical-align: middle对 inline 元素有效，但对 block 子元素需额外包裹或 flex
响应式场景下 colspan 容易破坏布局
在移动端或使用媒体查询缩放表格时，
colspan不会自动“拆分”回原始列数，它始终强制占据指定列宽。这意味着：原本colspan="4"的表头，在窄屏下可能撑破容器、触发横向滚动，而旁边的内容列却被压缩到看不见。这不是 bug，而是
colspan的语义决定的——它表达的是“逻辑合并”，不是“视觉适配”。所以真实项目中，跨列标题常被拆成独立区块（如用div+ Flex 替代table），或通过 JS 动态切换结构。- 测试时务必在小屏幕宽度下 inspect 元素，看是否出现意外溢出
- 不要指望
max-width或word-break能修复colspan引发的布局断裂 - 如果表格必须响应式，优先考虑用 CSS Grid 或 Flex 模拟表结构，而非硬扛
colspan
- 安全做法：给带
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
