<tr>本身不决定方向，它只是表格行容器；垂直物流进度需每个节点独立<tr>并用<td>布局控制，语义正确时比div更易维护。
用 <tr> 实现垂直物流进度，关键在语义和结构
直接说结论：<tr> 本身不决定方向，它只是表格行容器；垂直进度效果靠的是把每个物流节点放在独立的 <tr> 里，并配合 <td> 的布局控制。强行用 <tr> 做“进度条”容易语义错乱，但用对了反而比 div 更易维护。
物流时间线必须用 <table> 吗？什么时候该换方案
不是必须。如果物流节点数固定、样式简单、无需屏幕阅读器支持，<ul> + CSS 伪元素更轻量；但若要导出 PDF、兼容老旧邮件客户端、或需按时间/状态排序（比如后端返回 JSON 后用 JS 动态生成），<table> 的天然行列结构反而省去很多 DOM 操作和样式 hack。
- 邮件模板中嵌入物流信息：优先用
<table>，避免 Gmail 等客户端解析 CSS 失效 - 需要导出为 Excel 或打印：用
<table>可直接复制粘贴保留结构 - 节点动态增减频繁且含复杂交互（如点击展开详情）：改用
<ol>或<div>+ ARIA role="list"
<tr> 里放什么？两个 <td> 就够用
典型物流项包含「时间 + 事件描述」两列，一个 <tr> 对应一个节点。别把图标、状态徽章塞进同一 <td> 内硬拼接——拆开更可控。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<tr> <td class="time">2024-06-15 14:22</td> <td class="desc">已签收，签收人：张三</td> </tr>
-
class="time"和class="desc"是必须的，用于区分样式和 JS 查询目标 - 避免用
colspan合并单元格来“模拟”连接线——会导致打印时断线、屏幕阅读器跳过中间内容 - 时间字段建议用
<time datetime="2024-06-15T14:22">包裹，提升可访问性
垂直进度线怎么画？CSS 用 border 而不是伪元素
用 <tr> 做垂直列表时，连接线最稳的方式是给每个 <tr> 的 border-left 或 border-right 加细线，再用 :first-child 和 :last-child 控制首尾。
立即学习“前端免费学习笔记（深入）”；
tr { border-left: 2px solid #e0e0e0; }
tr:first-child { border-top: 2px solid #e0e0e0; }
tr:last-child { border-bottom: 2px solid #e0e0e0; }
- 别用
::before在<td>里画竖线——表格单元格盒模型受border-collapse影响大，容易错位 - 移动端需注意：竖线在窄屏上可能被截断，加
min-width: 1px防止消失 - 状态色区分（如“派送中”用橙色、“已签收”用绿色）建议只作用于文字颜色，不要动进度线颜色，否则视觉逻辑混乱
真正难的不是画线，而是当某条物流记录缺失时间字段时，<time> 标签空值导致布局塌陷——得提前在 JS 渲染层 fallback 成 “—” 或 “暂无”，而不是靠 CSS 修补。
