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