不能用<table>实现物流时间轴，因其违背事件流语义、响应式错乱、无障碍失效；正确结构是<ol><li><time>，配合伪元素绘制竖线圆点，并在移动端转为flex堆叠布局。
直接用 <table> 做物流时间轴，基本等于给自己埋雷——结构错、语义丢、响应式崩、无障碍废。
为什么不能用 table 实现物流时间轴
表格本质是二维数据网格，而物流节点是单向、有序、带时间戳的事件流。<table> 强行套用会导致几个硬伤：
-
<tr>表示“行”，但物流节点之间没有横向关联性，强行按行组织会让语义混乱 - 列宽控制（比如
width="20%"）在不同字体、缩放、设备下极易错位，尤其时间+状态混在一格时，窄屏直接折行压垮圆点 - 无障碍支持差：
<table>会被读屏软件当作数据表朗读，每条物流记录变成“第1行，第1列：2024-05-20；第1行，第2列：已发货”，完全丢失事件流逻辑 - 无法用伪元素干净绘制竖线——
<table>的 border 模型和position: relative配合极差，IE/Safari 下圆点偏移、连线断开是常态
正确结构必须用 ol + time 标签
物流时间轴唯一靠谱的 HTML 结构是 <ol> 套 <li>，每个节点内用 <time> 显式标记时间：
<ol id="logistics-timeline">
<li data-status="dispatched">
<time datetime="2024-05-20T08:22:15Z">2024-05-20 16:22</time>
<p>已发货</p>
<small>由顺丰速运承运</small>
</li>
<li data-status="in_transit">
<time datetime="2024-05-21T11:47:33Z">2024-05-21 19:47</time>
<p>运输中</p>
</li>
</ol>
关键点：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
datetime属性必须是 ISO 8601 格式（含时区信息），否则<time>失去机器可读性 - 别把时间字符串硬编码进
<p>—— 后续做 i18n 或时区转换时，会逼你全文本正则替换 -
data-status用于 CSS 动态着色（如[data-status="delivered"] { color: #28a745; }），比写死 class 更易维护
CSS 对齐核心：伪元素 + position: relative
时间轴的竖线和圆点必须用伪元素实现，且父容器要设 position: relative：
ol#logistics-timeline {
position: relative;
padding-left: 2rem;
}
ol#logistics-timeline::before {
content: "";
position: absolute;
left: 0.5rem;
top: 0;
bottom: 0;
width: 2px;
background-color: #e0e0e0;
}
ol#logistics-timeline li {
position: relative;
padding-left: 2.5rem;
margin-bottom: 1.5rem;
}
ol#logistics-timeline li::before {
content: "";
position: absolute;
left: 0.5rem;
top: 0.5rem;
width: 1rem;
height: 1rem;
border-radius: 50%;
background-color: #007bff;
}
常见翻车点：
- 漏写
position: relative在<ol>上 →::before定位基准错乱，竖线飘走 - 用
border-left替代伪元素 → 每个<li>左边多出像素，圆点悬空 - 圆点用
em单位但没设line-height→ 字体缩放时圆点与文字错位
移动端对齐必须重置布局方向
小屏下坚持垂直时间轴，只会让时间戳和状态挤成一团。真正有效的方案是：
- @media (max-width: 768px) 中，把
<ol>改为display: flex; flex-direction: column; - 每个
<li>内部用display: flex; flex-wrap: wrap;，<time>设flex: 0 0 auto;，<p>设flex: 1 1 auto; - 隐藏竖线，改用顶部横线 + 左右堆叠：给
<time>加text-align: right;，<p>加text-align: left; - 避免用
flex-direction: row强行横排——节点宽度撑满导致换行，要用inline-flex控制紧凑排列
真正难的不是画出那条线，而是让每条物流记录在任意缩放、任意屏幕、任意辅助工具下，都保持「谁在什么时候做了什么」这个事实不被扭曲。结构松一毫，后续所有样式、JS、无障碍适配都会跟着偏。
