必须设置 table { table-layout: fixed; width: 100% }，且所有 th/td 统一设 width: 14.2857%，否则百分比宽度无效；日期需按周一至周日对齐，用 和 语义化结构，避免跨月错位。
table-layout: fixed 是等宽前提，不加它 width 百分比基本无效
浏览器默认用 auto table-layout，列宽由内容撑开，width: 14.2857% 在这种模式下只是“建议值”，实际会被忽略。必须给 <table> 显式设置 <code>table-layout: fixed，否则所有后续等宽努力都白做。
常见错误是只写 td { width: 14.2857% } 却漏掉 table { table-layout: fixed }，F12 查看 computed style 会发现 width 值被标记为 “not applicable”。
- 必须在
<style></style>或 CSS 文件中为<table> 设置 <code>table-layout: fixed -
width: 100%要同时加在<table> 上，否则固定布局无参照宽度<li>所有 <code><th> 和 <code><td> 都应统一设 <code>width: 14.2857%（7 列），不要只设其中几列 - 避免混用
border-collapse: collapse和border-spacing——前者会让边框合并，后者在 fixed 布局下可能干扰宽度计算 - 空日留
<td></td>，别用 <th scope="col"> 必须用于星期表头，不能用 <code><td> 替代，否则语义缺失、无障碍支持弱<li>事件文字过长时，<code>white-space: nowrap会撑破列宽，改用overflow: hidden; text-overflow: ellipsis; max-width: 100%- 别对
<td> 设 <code>min-width，它会破坏等分逻辑；等宽靠table-layout: fixed + width: 14.2857%就够 -
box-sizing: border-box要加在td, th上，确保 padding 不额外增加宽度 - 打印样式里加
@media print { table { page-break-inside: avoid } }，避免周历被截断在两页 - 千万别用“本月 1 号开始硬推七天”，那不是周历，是月视图片段
- 跨月日期本身无需特殊 class，但若想视觉区分，可加
class="other-month"并设opacity: 0.6 - 当天高亮用
class="today"，配合datetime属性比 class 名更可靠（JS 后续可读取）
日期和事件要分层放，别塞进 data-* 属性里
纯静态日程表的关键是结构语义化：<time></time> 标日期，<ul></ul> 列事件，HTML 自己就能渲染，不需要 JS 解析 data-*。
硬编码 <tr> 七行再往里填内容，容易跨月错位；更稳妥的是服务端或手动生成当前周的起止日期（比如 <code>2026-07-06 到 2026-07-12），然后每列第一行放 <time datetime="2026-07-06">7/6</time>，下面再嵌 <ul>
<li>开会</li>
<li>评审</li>
</ul>。
小屏横向滚动？那是没限制整体宽度和单元格内距
默认 <table> 会随内容撑开，尤其事件文字多、字体大时，直接导致手机上左右滑动——这不是设计意图，而是布局失控。<p>解决方法不是靠媒体查询“强行缩小字体”，而是从根上约束：用 <code>table { width: 100% } 锚定容器，再配 td, th { padding: 0.25em 0.5em } 控制内边距，最后用 font-size: 0.9em; line-height: 1.2 防止换行切字。
跨月日期错位？问题出在起始日没对齐周一
手动写 HTML 周历时，如果直接按“7月1日到7日”生成，但 2026-07-01 是周三，那表格第一列就该是周一（2026-06-29），否则整周日期偏移，事件全贴错列。
纯静态方案不依赖 JS 计算，但需要你提前确认当前周的周一日期（可用 Python、PHP 或在线工具查），例如 2026-07-06 是周一，那七列依次是 2026-07-06 到 2026-07-12，哪怕其中包含 6 月最后一天也得照排——这是语义正确性的代价。
真正卡住人的地方不在代码量，而在“周一必须对齐第一列”这个隐含规则——它不报错，但一错，整个日程就错位。只要起始日算准、table-layout: fixed 加牢、width 统一设到每个单元格，剩下的就是复制粘贴和填内容的事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
