border-collapse必须作用于table元素才生效，写在td、tr或th上无效；启用后相邻边框按宽度、样式、颜色优先级合并，且border-spacing自动失效。

border-collapse 必须写在 table 元素上才生效

很多人给 td 或 tr 加 border-collapse: collapse，结果完全没反应——这个属性只对 table 生效，是表格级样式，不是单元格级。浏览器会直接忽略写在 th、td 或 tr 上的该声明。

常见错误现象包括：边框看起来加粗、有白缝、内边距撑开后出现错位；或者明明写了 collapse 却还是双线。

• 正确写法：table { border-collapse: collapse; }
• 如果用行内样式，必须是 <table style="border-collapse: collapse"> <li>搭配 <code>border-spacing: 0 是冗余的，collapse 模式下它自动失效，留着反而容易混淆
• IE7 及更早版本不支持 collapse，会被静默忽略（现在基本可不考虑）

合并后的边框怎么决定最终样式

启用 border-collapse: collapse 后，相邻边框（比如 th 的 bottom 和 td 的 top）不再各自渲染，而是按规则“冲突合并”：取宽度最大、样式最实（solid > dashed > dotted）、颜色以后声明者为准。

使用场景常见于想统一外边框粗细，或模仿 Excel 网格效果。例如：

• th { border-bottom: 2px solid #333; }
• td { border-top: 1px solid #666; }
• 最终显示的是 2px solid #333，不是叠加也不是平均
• 如果某处写了 border: none，它不参与合并计算，会被其他方向的边框覆盖

text-align 控制水平对齐，但别只设在 table 上

text-align 对表格整体无效，它只作用于块级内容或表格单元格内的文本。直接写 table { text-align: center; } 不会让所有单元格文字居中——必须明确指定到 th 和 td。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载

典型需求如表头居中、数据右对齐（金额列），就得分开控制：

• th { text-align: center; }
• td { text-align: right; }
• 若某列需要左对齐（如姓名），可用类名单独覆盖：.name-col { text-align: left; }
• 注意：text-align 不影响表格在页面中的位置，那是 margin: 0 auto 或 Flex/Grid 的事

vertical-align 决定单元格内容垂直位置，不是 table 的属性

vertical-align 常被误认为能控制整张表上下居中，其实它只对单元格内部内容起作用（类似 inline 元素的基线对齐）。设在 table 上无效，设在 tr 上多数浏览器也不支持。

真正生效的位置只有 th 和 td，常用值是 top、middle、bottom：

• th, td { vertical-align: middle; } 让文字在单元格内垂直居中
• 如果单元格里有图片或行内元素，vertical-align 会影响它们与文字的相对位置
• 表格本身在页面中垂直居中，得靠父容器用 Flex 或 Grid 实现，和 vertical-align 无关

最容易被忽略的一点：边框合并后，border 的声明顺序和具体位置（top/bottom）直接影响最终视觉效果；而 text-align 和 vertical-align 都不能跨层级继承，必须显式写到对应元素上，否则就是默认的 left 和 baseline。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！