课表布局应使用<colgroup>显式定义列宽，时间列设min-width防塌缩，日期列用百分比留余量；跨节次排课必须用rowspan按最小时间粒度（15或20分钟）取整合并行；响应式下隐藏非当前日列需同步处理<col><th><td>；导出PDF时为每课时<tr>设page-break-inside: avoid。
表格结构必须用 <colgroup> 控制时间列宽度
纯靠 <td> 内联样式或 CSS width 在课表里基本不可靠，尤其跨浏览器时时间列会因内容长度自动撑开。真正稳定的做法是用 <colgroup> 显式定义每列宽度——特别是第一列（时间块）和后续每天的列。
常见错误是把所有列宽写成固定像素，结果在小屏上溢出。建议时间列用 min-width + width 组合，日期列用百分比或 fr 单位（若用 Grid 替代 Table 则另说，但本方案基于语义化表格）：
<colgroup> <col style="width: 80px; min-width: 80px"> <!-- 时间栏 --> <col style="width: 14%"> <col style="width: 14%"> <col style="width: 14%"> <col style="width: 14%"> <col style="width: 14%"> <col style="width: 14%"> </colgroup>
- 时间列必须设
min-width，否则空单元格会让列塌缩 - 日期列总和不要硬凑 100%，留点余量防四舍五入偏差
- 避免在
<td>上用colspan跨多天排课——会导致后续列错位，应改用<tbody>多行合并 +rowspan
rowspan 是跨节次排课唯一可靠方式
一节课占两节（如 8:00–9:40），不能靠 CSS 拉高 <td> 高度模拟，那样会破坏表格语义、影响屏幕阅读器识别，且打印时极易断行错位。必须用 rowspan 让单元格纵向合并。
关键在于：时间轴需按最小时间单位拆分行（例如每 20 分钟一行），再用 rowspan 合并对应行数。比如 45 分钟课 = 2.25 行 → 实际取整为 3 行（按 20 分钟/行），否则无法对齐。
立即学习“前端免费学习笔记（深入）”；
- 最小时间粒度建议统一为 15 或 20 分钟，避免出现小数
rowspan -
rowspan值必须是整数，且要覆盖完整课时时长，漏一行就会导致下方整列偏移 - 合并后单元格内容需垂直居中，用
vertical-align: middle，别依赖默认 baseline
响应式断点下优先隐藏非当前周日期列
桌面端显示周一到周五没问题，但手机竖屏只有 360px 宽，强行缩放表格只会让文字糊成一片。与其用 overflow-x: auto 滚动，不如直接用媒体查询隐藏非本周列，保留时间列 + 当前日列。
注意：不能只靠 display: none 隐藏 <col>，必须同步隐藏对应 <th> 和 <td>，否则 rowspan 会因列缺失而错乱。
- 给每列加 class 如
col-mon、col-tue，用@media (max-width: 480px) { .col-tue, .col-wed, ... { display: none; } } - 时间列永远保留，它是整个表格的锚点
- 隐藏列后，剩余列宽度要重算，避免留白过大
导出 PDF 时 page-break-inside: avoid 必须作用于 <tr>
用户常把课表导出为 PDF 打印，结果某节课被截断在两页之间——这是因为默认情况下浏览器允许表格行跨页断开。解决办法不是给整个表格加 page-break-inside: avoid（会强制整表单页，可能空白太多），而是精准控制行。
- 给每个表示课时的
<tr>加style="page-break-inside: avoid;" - 若某节课跨多行（即用了
rowspan），只需给第一行加该样式，后续合并行会自动跟随 - Chrome 和 Edge 支持良好，Safari 对表格分页支持弱，导出前建议用 Chrome 打印预览确认
时间块排版真正的复杂点不在视觉对齐，而在时间粒度、rowspan 计算、响应式列隐藏三者之间的耦合——改其中一项，另外两个几乎必然要同步调整。
