不是最佳选择，因其违背语义（物流是时序流而非二维表）、导致样式失控（窄屏错位）及无障碍失效（屏幕阅读器误读为行列）。应改用组合，语义正确且易维护。

用 <tr> 模拟垂直时间轴，为什么不是最佳选择 <p>直接用 <code><tr> 套物流节点做“垂直进度条”，表面看结构整齐，实际会踩三个坑：语义错位、样式失控、无障碍失效。表格是为二维关系数据设计的（行列交叉），而物流是单向时序事件流——<code><ol></ol> 才是语义正确的容器。<tr> 强行撑开后，屏幕阅读器会把每个物流节点读作“第1行第1列”，而非“第1个步骤”，对视障用户完全不可用。 <h3><code><tr> 里塞 <code><time></time> 和状态文本，datetime 属性容易失效

有人在 <td> 里写 <code><time datetime="2024-05-20">5月20日</time>已签收，但漏掉 ISO 时间格式细节，导致搜索引擎和辅助工具无法解析。必须确保：datetime 值是完整 ISO 8601 格式（如 2024-05-20T14:30+08:00），不能只写日期或中文时间；<time></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>，那就得彻底禁用表格的二维布局逻辑，否则窄屏下文字折行、连接线错位、圆点偏移全是必然结果。 <ul><li>给 <code><table> 设 <code>display: block，让它失去表格渲染模式

每个 <tr> 改为 <code>display: flex; flex-direction: column，再用 position: relative 配合伪元素画竖线

删掉所有 border-collapse、cellspacing、cellpadding，这些属性在非表格语义下只会干扰定位

绝对不要依赖 <th> 或 <code><td> 的默认样式，全部重置 <code>margin/padding/vertical-align

比 <tr> 更轻、更稳的替代路径 <p>真正要的是垂直流式展示，不是表格本身。用 <code><ol></ol> + <li> + <time></time> 组合，配合几行 CSS 就能跑通所有场景，且天然支持打印、缩放、i18n 替换和 SEO。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 结构干净：<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 控制，才是让浏览器按设计意图工作。真正的复杂点不在怎么画线，而在是否愿意放弃“看起来像表格”的执念，去选对的工具。</tr>

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