使用rowspan合并HTML表格单元格时如何抑制单元格溢出？

你的问题根源是每行单元格数量与表头列数不匹配：表头一共6列（Period + 周一至周五），但包含跨多行单元格（rowspan）的后续行中，多写了多余的空<td>标签，导致浏览器渲染时自动补出第7列，添加边框后这个错位问题就显现出来了。

举个例子：第一行的周一、周三单元格用了rowspan=3，意味着这两个单元格会占据接下来的2行（对应课时2、3），所以这两行里不需要再为周一、周三列添加空<td>，但你当前代码里这两行都写了6个空<td>，加上开头的课时列，总共有7个单元格，超出了表头的列数上限。

修正方案 #

针对使用rowspan=N的单元格，在接下来的N-1行中，删除对应列的<td>标签，确保每行的单元格总数严格等于表头的列数（6列）。

以你的代码为例，修正后的关键行如下：

<!-- 课时1行：正常6个单元格，周一、周三设置rowspan=3 -->
<tr><td>1 (8:00-8:30)</td><td rowspan=3>CHEM1250 L01<br>Instructor: John<br>Room: 201<br>Periods: 3</td><td></td><td rowspan=3>BIOL1150 L01<br>Instructor: Michel<br>Room: 201<br>Periods: 3</td><td></td><td></td></tr> 
<!-- 课时2行：省略周一、周三的<td>，保留剩余4列空单元格，总数量6个 -->
<tr><td>2 (8:30-9:00)</td><td></td><td></td><td></td></tr> 
<!-- 课时3行：省略周一的<td>，周二设置rowspan=3，总数量6个 -->
<tr><td>3 (9:00-9:30)</td><td rowspan=3>PHYS1200 L01<br>Instructor: Jenna<br>Room: 203<br>Periods: 3</td><td></td><td></td><td></td></tr> 
<!-- 课时4行：省略周二的<td>，总数量6个 -->
<tr><td>4 (9:30-10:00)</td><td></td><td></td><td></td><td></td></tr> 

通用规则 #

只要使用rowspan属性，就记住：该属性值代表单元格占据的行数，后续rowspan-1行里必须跳过对应列的单元格，不能再写空<td>，否则会触发列数溢出，导致边框显示时出现多余的列。

内容的提问来源于stack exchange，提问作者Pedroski