如何在HTML嵌套表格中使用colspan实现单元格按时长跨列需求

嵌套表格方案不可行的原因 #

你采用的嵌套表格方案无法实现跨日期列的效果，核心原因是：

• 每个内层表格是完全独立的渲染单元，colspan 属性仅能在当前所属表格的列范围内生效
• 你当前每个日期对应的内层表格只有1列，即使设置colspan="3"也仅能在当前单列表格内生效，无法跨到外层表格其他列对应的内层表格中，自然看不到预期效果

推荐实现方案 #

不要使用嵌套表格，改用原生单表格实现即可，具体逻辑如下：

1. 表格结构保持表头为日期列，表体每一行对应一个时间单位（比如半小时/1小时）
2. 你需要按列插入数据的需求，仅需要提前做一次数据结构转换即可：
   • 先构造一个空二维数组，行数量等于时间分段总数，列数量等于日期总数
   • 将按日期（列）存储的日程数据，填充到二维数组对应的位置，需要跨N天的日程直接给对应单元格标记colspan="N"
   • 最后按行遍历二维数组渲染表格即可，符合HTML表格的原生渲染规则，兼容性最好
3. 如果不想做数据转换，也可以采用CSS Grid布局实现列优先的日程表，比表格倒置的方案维护成本更低，适配性更好

现有代码的可优化点 #

你提交的代码里存在语法错误：内层表格的</table>闭合标签上额外写了class属性，属于无效语法，会被浏览器忽略。

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