HTML表格不能用于房态时间轴，因其语义错位、列宽自适应导致日期偏移、无法动态视图切换且无障碍支持差；CSS Grid配合严格时间槽绑定和正确datetime属性才是唯一可靠方案。
HTML表格不能用来做房态时间轴——这不是写法问题，而是语义和行为的硬伤。
为什么<table>一用就崩
<p>房态时间轴本质是「按时间对齐的二维坐标系」：横轴是日期（不可变粒度），纵轴是房型（固定集合）。而<code><table>的列宽由内容撑开、跨行逻辑依赖<code>rowspan、缩放时列序错乱，导致：
- 某天入住率高，房型名超长 → 该列变宽 → 后续所有日期列偏移，任务条错位
- 把“2026-07-16”塞进
<td>，它只是普通文本，无法被 JS 当作时间基准计算房态重叠
<li>想从“周视图”切到“日视图”，得重写整个 HTML 结构和 CSS 列定义，没法动态响应</li>
<li>屏幕阅读器会把时间轴当成数据表朗读，顺序混乱，语义完全失效</li>
<h3>
<code>grid-column必须手算列号的真相
<td>，它只是普通文本，无法被 JS 当作时间基准计算房态重叠
<li>想从“周视图”切到“日视图”，得重写整个 HTML 结构和 CSS 列定义，没法动态响应</li>
<li>屏幕阅读器会把时间轴当成数据表朗读，顺序混乱，语义完全失效</li>
<h3>
<code>grid-column必须手算列号的真相CSS Grid 是目前唯一能稳住房态时间轴结构的原生方案，但前提是列定义与时间槽严格绑定：
- 用
grid-template-columns: repeat(7, minmax(120px, 1fr))定义一周 7 列，每列对应一个<time datetime="2026-07-16"></time> - 某房型在 7 月 16–18 日被占用，就得写
grid-column: 1 / 4（起始列 1，终点列 4，不包含） - 第一列必须是标题列（房型名），真实日期列从第 2 列开始 → 起始列号不是“日期序号”，而是“网格列序号”
- 没加
minmax(120px, 1fr)？窄屏下时间槽压缩到 30px，房态色块看不见，用户以为没数据
<time datetime="..."></time>填错格式的后果
房态卡片里每个<time></time>的datetime属性不是摆设，它是后续 JS 计算冲突、API 对接、无障碍访问的唯一依据：
立即学习“前端免费学习笔记（深入）”；
- 写
<time>7月16日</time>或datetime="2026/07/16"→ 搜索引擎抓不到时间点，日历插件无法导入，echarts 渲染静默失败 - 后端返回
"2026-07-16T00:00:00"可直接用；返回"2026/07/16"必须转：new Date("2026/07/16").toISOString().slice(0,10) - 带时分秒必须补零+含
T：datetime="2026-07-16T14:00:00+08:00"，写成"2:00 PM"或漏时区，本地显示可能偏移一天 - IE11 不支持 Grid？别砍功能，用
@supports (display: grid)降级为<ol></ol>单列时间流，至少保留语义和可访问性
真正难的不是画出格子，而是让每一列、每一个<time></time>、每一个grid-column值都指向同一个时间坐标系——差一秒，错一列；错一列，全盘偏移。
