必须用table-layout: fixed，否则列宽会因内容不均而飘移，导致周历在移动端横向滚动；需配合width: 100%、各列width: 14.2857%及min-width: 120px，并严格区分th（星期）与td（日期+事件），确保语义正确、打印友好、响应式稳定。
周计划表必须用 table-layout: fixed 否则列宽会飘
不加这个声明，浏览器默认按内容撑开列宽——比如某天塞了三条会议，那一列就比其他列宽一大截，整个周历在手机上横向滚动，根本没法用。关键不是“能不能显示”，而是“能不能稳定对齐”。table-layout: fixed 一加，width 值才真正生效，列宽不再被内容绑架。
常见错误是只给 <td> 设 <code>width: 14.2857% 却忘了父级 <table> 没开 fixed 布局，结果样式写了等于没写。还有的人在 <code><style></style> 里写 td { width: 14.2857% }，但没加 table th, table td 这种更精确的选择器，导致 <th> 表头没同步缩放，视觉错位。
<ul>
<li>
<code>table 必须设 width: 100% 和 table-layout: fixed
<th> 和 <code><td>）统一设 <code>width: 14.2857%，别只设 <td>
<li>避免用 <code>colspan 或 rowspan 打乱列结构——它们会破坏等宽计算逻辑<time datetime="..."></time> 要和实际周起止严格对应，否则星期几和日期对不上
th 和 td 的语义分工不能混用
表头行用 <th scope="col"> 标星期几（如“周一”），这是给屏幕阅读器和打印样式用的；日期和事件必须放在 <code><td> 里——哪怕只是写个 <code><time datetime="2026-07-06">7/6</time>。有人图省事把星期和日期都塞进 <th>，结果打印时日期字体变粗、无障碍工具读成“列标题”，用户根本分不清哪天是哪天。
<p>事件列表必须用 <code><ul></ul> 包裹，每条事件一个 <li>。别用 data-event 存事件然后靠 JS 渲染——那就不是纯静态周历了，违背“不依赖 JS”的前提。
立即学习“前端免费学习笔记（深入）”；
<th scope="col"> 只用于“周一”“周二”这类列标题，不放日期 <li>每个 <code><td> 第一行放 <code><time></time>，后面跟<ul><li>...</li></ul>，没事件就空着<td></td>- 不要用
<div> 替代 <code><ul></ul>——语义丢失，打印时可能丢样式或换行异常 -
<time datetime="YYYY-MM-DD"></time>的值必须真实可解析，比如2026-07-06，别写7/6这种格式 - 优先用
width: 14.2857%+min-width: 120px组合，兼顾等分与可读性 -
box-sizing: border-box必须加，否则 padding 会让实际宽度超限 - 字体大小别设太大，
font-size: 14px在移动端刚好，16px 就容易撑出横向滚动条 - 测试时真机打开，别只看 Chrome DevTools 的模拟尺寸——iOS Safari 对
table-layout: fixed的兼容性略差，要实测 - 加
@media print规则，强制border: 1px solid #000和background: #fff -
<time></time>标签在打印时默认不显式渲染 datetime 属性，所以必须让可见文本（如7/6）本身可读，别只靠属性存值 - 禁用
overflow: hidden打印时会导致事件截断，建议打印样式里设overflow: visible - 别依赖阴影或渐变——打印机不认这些，纯色块最稳
响应式下 width: 14.2857% 会失效？用 min-width 锚定底线
小屏设备上，14.2857% 算出来可能不足 40px，文字挤成一团甚至换行。这时候单纯百分比不够，得加兜底：给 <td> 和 <code><th> 同时设 <code>min-width: 120px（或根据字体大小调整），再配合 overflow: hidden 和 text-overflow: ellipsis 防溢出。
注意 min-width 是“最小宽度”，不是“固定宽度”——它只在百分比算出来的值太小时起作用，不影响大屏下的均分逻辑。有人误设 width: 120px，结果桌面端七列加起来才 840px，表格严重缩窄，右侧留白大片。
打印样式里最容易被忽略的三件事
纯静态周历的一大优势是能直接打印，但很多人导出 PDF 时发现边框消失、日期错位、事件重叠——问题不在 HTML，而在没写打印专用 CSS。
浏览器默认会关掉背景色、隐藏 overflow 内容、重置字体大小。不干预的话，打印出来的周历可能只剩文字骨架，连日期都看不清。
