纯HTML表格不是时间轴的推荐载体，因其强制行列对齐、难以响应式折叠、动态增减维护成本高；仅适用于静态文档、高无障碍要求或CMS模板锁定场景。
时间轴用表格实现的合理性判断
纯 HTML 表格不是时间轴的推荐载体，尤其当时间点动态增减、需响应式折叠或带交互时。table 会强制行列对齐，导致「年份→事件→备注」这类非对称结构要么留空单元格破坏语义，要么用 rowspan/colspan 增加维护成本。真正需要表格布局的时间轴，通常只出现在静态文档（如内部报告 PDF 导出）、无障碍要求极高的场景，或已有 CMS 模板锁定为 table 输出。
用 tr 和 td 实现交替行布局
如果必须用表格，交替排列指「奇数行显示时间+标题，偶数行显示描述+补充信息」，而非 CSS 的 :nth-child 伪类——那是渲染效果，表格结构本身要明确区分语义层级。
- 每组时间点拆成两个
tr：第一个tr放th（时间）和td（标题），第二个tr放td（描述）和可选的td（来源/状态） - 避免跨行合并：
rowspan="2"看似省行，但屏幕阅读器会重复读取时间字段，且后续新增条目时容易错位 - 给时间列加
scope="row"属性，让辅助技术知道该单元格是本行数据的标题
<table>
<tbody>
<tr>
<th scope="row">2023-04</th>
<td>API v2 上线</td>
</tr>
<tr>
<td colspan="2">支持 Webhook 回调与批量操作</td>
</tr>
<tr>
<th scope="row">2023-11</th>
<td>前端重构完成</td>
</tr>
<tr>
<td colspan="2">迁移至 TypeScript + Vite，Bundle 体积减少 37%</td>
</tr>
</tbody>
</table>
替代方案比表格更可控
绝大多数时间轴需求，用语义化标签组合更稳妥：
- 用
ol+li配合time元素：天然有序、语义清晰、默认缩进符合时间流向 - 用
dl（定义列表）：dt放时间，dd放事件详情，语义精准且无需额外 ARIA 标注 - 纯 CSS Grid 实现「左时间右内容」：用
grid-template-columns: 120px 1fr控制列宽，grid-row控制跨行，响应式断点直接改列数
这些方式不依赖表格模型，CSS 调整灵活，JS 动态插入也无须计算 tr 位置。
立即学习“前端免费学习笔记（深入）”；
表格时间轴容易被忽略的兼容性坑
即使坚持用表格，以下三点常被跳过：
-
table默认有border-collapse: collapse，但某些旧版 Outlook 客户端会重置为separate，导致单元格间隙失控——必须显式声明border-collapse: collapse并设cellspacing="0" - 移动端竖屏时，两列表格会水平溢出；加
overflow-x: auto到父容器比强制table-layout: fixed更安全 - 若时间值含中文「年/月/日」，确保
th内容用<time datetime="2023-04">2023年4月</time>包裹，既保机器可读又不影响视觉
真正卡住的往往不是怎么写，而是导出 PDF 或邮件内嵌时，表格被渲染引擎二次解析出的边框、字体继承和换行行为。
