课程表用完全可行，关键在合理使用rowspan/colspan合并单元格、css sticky固定表头与时间列、移动端切换为按天展开视图，并保持结构清晰便于维护。

直接用 <table> 做课程表完全可行，但关键在结构设计和 CSS 控制，否则容易错位、响应差、打印变形。 <h3>课程表必须用 <code>rowspan 和 colspan 合并单元格

课程表本质是「时间+教室/班级」二维映射，单节课常跨多节连续课时（比如第3–4节），或跨多个班级共用同一课（比如全校升旗）。不用 rowspan/colspan 硬拆成独立单元格，会导致逻辑断裂、样式失控。

• rowspan 用于纵向合并（如一节课占两行：第3节+第4节）
• colspan 用于横向合并（如「自习」横跨三门课的列）
• 务必先画草图标出每门课的起止行列，再写 HTML —— 写错一个 rowspan 值，整行后续单元格都会偏移
• 避免嵌套表格：老教程里用内部 <table> 模拟合并，现代浏览器渲染不稳定，且无法被屏幕阅读器正确识别 <h3>表头固定 + 左侧时间列冻结需用 CSS <code>position: sticky

  滚动查看长课程表时，星期栏（列头）和节次栏（行头）必须始终可见，否则用户会迷失位置。CSS position: sticky 是目前最轻量、兼容性足够（Chrome 56+/Firefox 59+/Edge 16+）的方案。

  

  html-ppt-to-pdf

  将使用 `

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

  下载
  • 给第一行（<tr>）所有 <code><th> 加 <code>position: sticky; top: 0; background: #fff; z-index: 1;
  • 给第一列（每个 <tr> 的第一个 <code><td> 或 <code><th>）加 <code>position: sticky; left: 0; background: #f5f5f5;
  • 父容器必须设 overflow-x: auto，且不能有 transform 或 filter —— 这两个属性会让 sticky 失效
  • 不要用 JavaScript 滚动监听模拟冻结：性能差、抖动明显、移动端 touch 事件难对齐

  移动端适配不是靠缩放，而是重构显示逻辑

  手机屏宽远小于课程表总宽度，强行缩小字体或 zoom 会让文字不可读、点击区域过小。真实可用的方案是切换为「按天展开」视图。

  • 用媒体查询隐藏原表格：@media (max-width: 768px) { table { display: none; } }
  • 另写一组语义化结构，例如每天一个 <section></section>，内含 <h3>周一</h3> + <ul></ul> 列出该日所有课（含节次、科目、教师）
  • 用 display: grid 替代表格布局时，注意 grid-template-rows 必须显式定义行高，否则自动高度会导致课程块堆叠错乱
  • 避免用 vw 单位控制字体大小：不同设备像素比下实际可读性差异大，优先用 rem + html 根字体动态调整

  	周一	周二	周三	周四	周五
  第1节	语文	数学	英语	物理	化学
  第2节	历史		地理	生物	体育

  真正难的不是写出第一版表格，而是当教务临时加一节「心理辅导课」插在第5–6节之间时，你能否 5 分钟内改完所有相关 rowspan、CSS 定位偏移、以及移动端展开列表的顺序 —— 这时候结构清晰比炫技重要得多。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！