HTML表格构建在线课表的时间块排版方案-html教程-PHP中文网

课表布局应使用显式定义列宽，时间列设min-width防塌缩，日期列用百分比留余量；跨节次排课必须用rowspan按最小时间粒度（15或20分钟）取整合并行；响应式下隐藏非当前日列需同步处理；导出pdf时为每课时设page-break-inside: avoid。

html表格构建在线课表的时间块排版方案

表格结构必须用 `<colgroup></colgroup>` 控制时间列宽度

纯靠 <td> 内联样式或 CSS <code>width 在课表里基本不可靠，尤其跨浏览器时时间列会因内容长度自动撑开。真正稳定的做法是用 <colgroup></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> 上用 <code>colspan 跨多天排课——会导致后续列错位，应改用 <tbody> 多行合并 + <code>rowspan
rowspan 是跨节次排课唯一可靠方式

一节课占两节（如 8:00–9:40），不能靠 CSS 拉高 <td> 高度模拟，那样会破坏表格语义、影响屏幕阅读器识别，且打印时极易断行错位。必须用 <code>rowspan 让单元格纵向合并。
关键在于：时间轴需按最小时间单位拆分行（例如每 20 分钟一行），再用 rowspan 合并对应行数。比如 45 分钟课 = 2.25 行 → 实际取整为 3 行（按 20 分钟/行），否则无法对齐。
- 最小时间粒度建议统一为 15 或 20 分钟，避免出现小数 rowspan
- rowspan 值必须是整数，且要覆盖完整课时时长，漏一行就会导致下方整列偏移
- 合并后单元格内容需垂直居中，用 vertical-align: middle，别依赖默认 baseline
响应式断点下优先隐藏非当前周日期列

桌面端显示周一到周五没问题，但手机竖屏只有 360px 宽，强行缩放表格只会让文字糊成一片。与其用 overflow-x: auto 滚动，不如直接用媒体查询隐藏非本周列，保留时间列 + 当前日列。

html-ppt-to-pdf
将使用 `
` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

注意：不能只靠 display: none 隐藏 <col>，必须同步隐藏对应 <th> 和 <code><td>，否则 <code>rowspan 会因列缺失而错乱。
- 给每列加 class 如 col-mon、col-tue，用 @media (max-width: 480px) { .col-tue, .col-wed, ... { display: none; } }
- 时间列永远保留，它是整个表格的锚点
- 隐藏列后，剩余列宽度要重算，避免留白过大
导出 PDF 时 page-break-inside: avoid 必须作用于 <tr> <p>用户常把课表导出为 PDF 打印，结果某节课被截断在两页之间——这是因为默认情况下浏览器允许表格行跨页断开。解决办法不是给整个表格加 <code>page-break-inside: avoid（会强制整表单页，可能空白太多），而是精准控制行。
- 给每个表示课时的 <tr> 加 <code>style="page-break-inside: avoid;"
- 若某节课跨多行（即用了 rowspan），只需给第一行加该样式，后续合并行会自动跟随
- Chrome 和 Edge 支持良好，Safari 对表格分页支持弱，导出前建议用 Chrome 打印预览确认