不能作为垂直进度条，因其仅为表格行元素，缺乏语义与无障碍支持；物流节点应使用或带aria属性的实现线性时序结构。
用 <tr> 做垂直进度条？别硬套表格语义
<p>直接说结论：<code><tr> 本身不构成“进度条”，它只是表格中的一行。强行用 <code><tr> + <code><td> 拼垂直列表，容易导致语义混乱、屏幕阅读器误读、响应式错位。物流节点本质是有序时间线，<code><ol></ol> 或带 aria-label 的 <div> 更合适。
<h3>为什么物流节点不适合纯表格结构</h3>
<p>表格（<code><table>）用于二维关系数据，比如“某天各仓库出库量对比”。而物流节点是线性、时序、单维度事件流：下单 → 打包 → 发货 → 在途 → 签收。用 <code><tr> 堆叠只是视觉上“看起来像竖着的”，但会带来实际问题：
<ul><li><code><table> 在小屏上默认横向滚动，用户得左右拖才能看全节点
<li>每个 <code><tr> 默认占满整行宽度，节点间间距难控制，加 <code>border-collapse 反而增加复杂度
更稳妥的垂直物流节点写法（CSS + 语义化标签）
用 <ol></ol> 包裹节点，每项用 <li>，配合 CSS 实现竖排+连接线。关键点：
- 给
<ol></ol>加list-style: none和counter-reset: step - 每个
<li>用::before生成序号，并通过position: relative+::after绘制竖线 - 当前节点加
class="active"，仅改颜色/图标，不破坏结构 - 必须为每个节点补充
aria-current="step"（当前步）或aria-disabled="true"（未开始）
示例片段：
<ol class="timeline"> <li aria-current="step">已下单</li> <li>打包中</li> <li>已发货</li> </ol>
如果非要用表格，至少避开这些坑
真有遗留系统或 CMS 输出强制走 <table>，请至少做到：
<ul>
<li>用 <code><caption></caption> 明确说明用途，例如 <caption>订单物流进度</caption>
<tr> 内只放一个 <code><td>，避免多列混淆时序
<li>给当前节点的 <code><td> 加 <code>role="status" 和 aria-live="polite"，让读屏软件及时播报
max-width: 768px 下强制 display: block，并重置 td 的宽高，否则移动端会挤压变形真正麻烦的不是怎么画线，而是让节点状态可感知、可操作、可缩放——这点上，<tr> 天然不擅长。</tr>
