纯HTML日程表需设table-layout:fixed、width:100%、border-collapse:collapse，th/td统一设width:14.2857%，禁用white-space:nowrap，用word-break或text-overflow控制内容，日期与事件分层嵌套确保语义和打印正确。
纯 HTML 表格就能做出可用的日程表，关键不是“能不能”，而是“怎么让 td 真正等宽、不挤、不破、不跨行错位”——table-layout: fixed 是唯一靠谱的起点，其他都是补救。
为什么直接设 width: 14.2857% 不生效？
浏览器默认用自动布局（table-layout: auto），此时你给 td 写的百分比宽度会被内容撑开，尤其当某天塞了 5 条事件时，整列就变宽，隔壁列被压缩，周历变成“歪头日程表”。
-
table必须显式声明table-layout: fixed，否则所有width设置形同虚设 - 只设
td宽度不够，th也得同步设，否则表头列宽仍由文字长度决定 - 不要用
width="14%"这种 HTML 属性，它在 fixed 布局下优先级低，容易被 CSS 覆盖
如何让七列严格等宽且内容不溢出？
等宽 ≠ 内容强制截断，而是控制容器行为：列宽固定，内容在内部合理折行或省略。
- 给
table设width: 100%和table-layout: fixed - 给
th, td统一设width: 14.2857%（即 100 ÷ 7），别四舍五入成 14.29% —— 小数精度偏差会导致最后一列错位 - 禁用
white-space: nowrap，改用word-break: break-word或overflow: hidden; text-overflow: ellipsis; max-width: 100%控制长事件名 - 为
td加box-sizing: border-box，确保 padding 不影响宽度计算
日期+事件怎么嵌套才不破坏语义和打印？
把日期和事件混在一个 td 里是常见错误，结果是屏幕阅读器读不出日期，打印时事件堆叠压住日期。
立即学习“前端免费学习笔记（深入）”；
- 每列第一行放
<time datetime="2026-07-06">7/6</time>，明确机器可读的日期 - 后续行用
<ul> <li>开会 10:00</li> <li>提交报告</li> </ul>，语义清晰、无障碍友好 - 空日留
<td></td>，别用div，否则打印样式会多出空白行 - 避免把事件存在
data-event里——纯静态日程表不依赖 JS 渲染，存了也白存
最易被忽略的一点：表格没设 border-collapse: collapse 时，单元格间默认有 border-spacing，导致整体宽度超 100%，小屏直接横向滚动。这个细节不修，前面所有等宽努力都白费。
