课程表渲染失败最常见原因是rowspan和colspan未配合删减对应位置的<td>或<th>；总标题需用colspan且同tr内不得有其他单元格；时段标签错位多因rowspan后漏删被覆盖单元格；合并单元格需同一<td>设rowspan与colspan且覆盖区域禁用其他<td>；响应式应避免纯table布局。
rowspan 和 colspan 必须配合删减对应位置的 <td> 或 <th>，否则表格结构会错位——这是课程表渲染失败最常见原因。
课程表头怎么用 colspan 合并星期栏
课表顶部通常有“星期一”到“星期日”共 7 列，但第一行常需一个“课程安排”总标题横跨全部列。这时不能只加 colspan="7" 就完事。
- 必须确保该
<th colspan="7">所在的<tr>中，**不出现其他<th>或<td>**，否则列数超限，浏览器会自动补空格或错行 - 如果还要加“时间”“教室”等辅助列，得先算清总列数：比如 7 天 + 1 列“节次” + 1 列“备注” = 9 列，则总标题应设
colspan="9" - 实际中更推荐把“星期”作为第二行表头，第一行只放
<caption>，语义更清晰，也避免跨列计算出错
“上午/下午”这类时段标签为什么总掉行？查 rowspan 漏删单元格
把“上午”写在第一节课左侧、让它纵向覆盖 4 行，是典型需求。但一旦出现错位、多出空白行或后续列整体下移，基本就是 rowspan 使用后没同步删掉被覆盖位置的单元格。
- 假设“上午”
rowspan="4"，它所在行是第 2 行，那么第 3、4、5 行的同一列位置，**必须不写任何<td>** - 常见错误：第 3 行还写了
<td>8:00</td>，导致浏览器认为该列有内容，强行撑开新行，破坏 rowspan 效果 - 调试技巧：用浏览器开发者工具检查对应
<tr>的子元素数量，对比是否与预期列数一致；若某行<td>数量异常多，大概率是这里漏删
一节课占两节连堂？rowspan 和 colspan 能一起用吗
能，但顺序和位置很关键。比如“计算机组成与结构（9–16）”要横跨周二、周三两列，又纵向覆盖第 3–4 节，就得同时设置 rowspan="2" 和 colspan="2"。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 这两个属性必须写在**同一个
<td>标签里**，如：<td rowspan="2" colspan="2">计算机组成与结构(9-16)</td> - 随后两行中，该单元格覆盖的 **2×2 区域内，其余 3 个位置都不能再出现
<td>**（即：第 3 行第 3 列已写，第 3 行第 4 列、第 4 行第 3 列、第 4 行第 4 列都要跳过） - 注意：合并区域不能超出表格定义的行列范围，否则部分浏览器可能静默截断或报错
响应式课表在小屏上崩了？别硬扛 table 布局
纯 HTML 表格靠 rowspan/colspan 构建的课表，在手机上几乎必然挤压变形——这不是属性用错了，而是技术选型问题。
-
table的列宽由内容撑开，小屏下无法自动换行或折叠，colspan合并反而加剧横向溢出 - 现代方案是：桌面端用
<table>+rowspan/colspan保持语义结构；移动端用 CSS@media隐藏表格，改用<dl>或<section>按“时间→课程→教室”垂直流式展示 - 如果必须用 table 响应式，至少加
table { width: 100%; table-layout: fixed; }并为每列设width，但依然无法解决 rowspan 跨行带来的高度不可控问题
真正难的不是写对 rowspan="3"，而是想清楚哪三行该“空着不写”——这个逻辑一旦错一层，整张课表就从第二行开始偏移，而且很难一眼看出哪行少删了单元格。
