必须设置 table-layout: fixed 并配合 scope 属性：前者锁定列宽防错位，后者明确表头语义，二者结合才能实现物理尺寸与逻辑关系的双重稳定。
用 table-layout: fixed 锁定列宽，避免内容撑开错位
表格列宽自动随内容伸缩，是视觉层次混乱的根源。比如一列突然塞进长URL或中文段落，整列被拉宽，其他列挤压变形，表头和数据对不齐——这不是样式问题，是布局算法没控制住。
必须在 <table> 上显式设置 <code>table-layout: fixed，让浏览器按第一行（通常是 <thead>）的 <code><th> 宽度来分配列宽，后续所有行都服从这个规则。
<ul>
<li>搭配 <code>border-collapse: collapse，否则边框会额外增加不可控间距
thead th:nth-child(1)、thead th:nth-child(2) 等逐列设 width，推荐用百分比（如 width: 20%），方便响应式适配white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 防止溢出破坏布局靠 th 和 scope 明确语义，让视觉权重自然分层
只靠加粗或背景色区分表头，对屏幕阅读器和高对比度模式用户是无效的。真正起作用的是语义标记：用 <th> 而非 <code><td> 写标题，并通过 <code>scope 属性告诉浏览器“这个表头管哪一列/哪一行”。
例如：<th scope="col">销售额</th> 表明它统领整列数据；<th scope="row">Q1</th> 表明它标识当前行。这样即使去掉所有CSS，辅助技术也能正确朗读结构，视觉上也更容易建立“标题—数据”的层级联想。
- 不要省略
scope——没有它，<th> 只是视觉加粗，语义不完整 <li>避免在 <code><tbody> 里混用 <code><th> 而不设 <code>scope，会导致解析歧义 - 配合 CSS 的
th[scope="col"]选择器，可单独给列标题加左/右 padding 或 border，强化纵向引导线 - 别用太深或太艳的色值——#f9f9f9 比 #f0f0f0 更柔和，#e6f3ff 比 #ffcc00 更易读
- 移动端慎用
hover，可改用:focus-within或 JS 绑定点击态 - 如果表格有合并单元格（
rowspan），nth-child会失效，得用 JS 动态加odd/even类 - CSS 媒体查询中用
@media (prefers-color-scheme: dark)包裹整套深色规则，别依赖 JS 检测 - 避免在深色模式下使用
box-shadow: 0 2px 4px rgba(0,0,0,0.2)这类偏黑阴影——它在暗背景上几乎不可见，应改用浅色模糊阴影 - 表格边框在深色模式下容易“消失”，建议统一用
border: 1px solid hsla(0,0%,100%,0.1)替代纯黑或纯白
用斑马纹和悬停反馈替代纯颜色堆砌
很多人一上来就调各种背景色、渐变、阴影，结果反而削弱可读性。真正提升视觉层次的，是**节奏感**：交替行背景 + 鼠标悬停高亮，能让眼睛快速定位横向关系。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
最简方案就是两行 CSS：tr:nth-child(even) { background-color: #f9f9f9; } 和 tr:hover { background-color: #e6f3ff !important; }。注意后者加 !important 是为了确保悬停时能盖过斑马纹。
深色模式下别硬套浅色逻辑，重点调透明度而非颜色值
直接把浅色模式的 #f2f2f2 换成 #333 并不能解决问题。深色背景下，高饱和色块会“跳出来”，干扰数据扫描。更稳妥的做法是用 hsla() 控制透明度，让背景色随上下文自然融合。
比如表头背景写成 background: hsla(210, 20%, 95%, 0.7)，既保持蓝灰调性，又因 0.7 透明度与深色背景叠加强度适中；单元格内边距用 padding: 12px 不变，但文字色从 #333 改为 hsl(0, 0%, 90%)，确保对比度达标。
table-layout: fixed 和 scope 的组合使用——前者管住物理尺寸，后者理清逻辑关系，两者缺一，视觉层次就只是表面功夫。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
