<tr>不是最佳选择，因其违背语义（物流是时序流而非二维表）、导致样式失控（窄屏错位）及无障碍失效（屏幕阅读器误读为行列）。应改用<ol><li><time>组合，语义正确且易维护。
用 <tr> 模拟垂直时间轴，为什么不是最佳选择
直接用 <tr> 套物流节点做“垂直进度条”，表面看结构整齐，实际会踩三个坑：语义错位、样式失控、无障碍失效。表格是为二维关系数据设计的（行列交叉），而物流是单向时序事件流——<ol> 才是语义正确的容器。<tr> 强行撑开后，屏幕阅读器会把每个物流节点读作“第1行第1列”，而非“第1个步骤”，对视障用户完全不可用。
<tr> 里塞 <time> 和状态文本，datetime 属性容易失效
有人在 <td> 里写 <time datetime="2024-05-20">5月20日</time>已签收，但漏掉 ISO 时间格式细节，导致搜索引擎和辅助工具无法解析。必须确保：datetime 值是完整 ISO 8601 格式（如 2024-05-20T14:30+08:00），不能只写日期或中文时间；<time> 内容可为任意格式展示，但机器只认 datetime 属性。
- 错误写法：
<time datetime="5月20日">5月20日</time> - 正确写法：
<time datetime="2024-05-20T14:30:00+08:00">5月20日 14:30</time> - 若后端只返回
"2024-05-20 14:30"，前端需补全为"2024-05-20T14:30:00"再塞进datetime
真要用表格强行实现垂直流，必须切断默认表格行为
如果已有遗留系统强制要求用 <table>，那就得彻底禁用表格的二维布局逻辑，否则窄屏下文字折行、连接线错位、圆点偏移全是必然结果。
- 给
<table>设display: block，让它失去表格渲染模式 - 每个
<tr>改为display: flex; flex-direction: column，再用position: relative配合伪元素画竖线 - 删掉所有
border-collapse、cellspacing、cellpadding，这些属性在非表格语义下只会干扰定位 - 绝对不要依赖
<th>或<td>的默认样式，全部重置margin/padding/vertical-align
比 <tr> 更轻、更稳的替代路径
真正要的是垂直流式展示，不是表格本身。用 <ol> + <li> + <time> 组合，配合几行 CSS 就能跑通所有场景，且天然支持打印、缩放、i18n 替换和 SEO。
立即学习“前端免费学习笔记（深入）”；
- 结构干净：
<ol class="timeline"><li><time datetime="...">...</time>已发货</li></ol> - 连线用
.timeline::before画贯穿竖线，节点圆点用li::before+transform: translate(-50%, -50%)居中 - 移动端横排只需加
@media (min-width: 768px) { .timeline { flex-direction: row; } }，无需改 HTML - JS 渲染时，只操作
textContent，不拼接 HTML 字符串，防 XSS
用 <tr> 实现垂直流，本质是在对抗 HTML 本意；而用语义化标签 + CSS 控制，才是让浏览器按设计意图工作。真正的复杂点不在怎么画线，而在是否愿意放弃“看起来像表格”的执念，去选对的工具。
