表格在forced-colors: active下边框消失的真正原因是系统清空border-color和background-color，需用canvas/buttontext等语义色重建层级，并慎用forced-color-adjust:none。
表格在 forced-colors: active 下边框消失的真正原因
不是 border-collapse 或 table-layout 失效，而是系统清空了所有 border-color 和 background-color 声明。你写的 border: 1px solid #ccc 里，solid 和 1px 保留，但 #ccc 被强制替换为透明或不可见色——视觉上就像“边框没了”。同理，th 的浅灰背景被清空，导致表头和单元格失去区分度。
用 ButtonFace/CanvasText 显式重写表格结构
别试图“恢复原样式”，而是用系统语义色重建可识别层级：
-
table、th、td必须显式设background-color: Canvas;（不是transparent） -
th文字用color: ButtonText;，加border-bottom: 2px solid ButtonText;强化分隔 -
tr:nth-child(even)不能靠背景色区分，改用outline: 1px solid CanvasText;（outline的 color 在 forced-colors 下仍可被系统映射） -
td内若有链接，必须补text-decoration: underline;—— 因为color被接管后，纯色文字和普通文本可能完全同色
forced-color-adjust: none 在表格里慎用
对整个 table 加 forced-color-adjust: none 是高风险操作：它不会让表格“变回原来的样子”，反而因缺少显式颜色声明，导致文字与背景撞色（比如 color 没写 → 系统给 ButtonText，background-color 没写 → 系统填 Canvas，而这两者在某些高对比主题下恰好同为白色）。
仅在极少数场景下可用：
- 仅限小范围、语义明确的单元格，如状态徽章：
.status-cell { forced-color-adjust: none; color: HighlightText; background-color: Highlight; } - 必须拆开写
border-color、border-style、border-width，不能用简写border - Safari 不支持该属性，需配合
@media (forced-colors: active)降级规则
测试时最容易漏掉的两个点
Chrome DevTools 的 “Emulate forced colors” 只模拟颜色接管，**不会清空 background-image 或降级 box-shadow** —— 这些在真实 Windows 高对比主题下是直接失效的。真机验证必须做：
- Windows 设置 → 辅助功能 → 高对比度 → 开启“高对比度 #1”或“高对比度黑色”
- 检查
th是否有足够粗的底部边框、td内容是否可读、奇偶行是否能靠 outline 区分
真正难的是让表格在无背景、无阴影、无渐变的前提下，仅靠边框、文字色、underline 和 outline 构建出稳定的信息密度——这不是美化问题，是可访问性底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
