如何让表格行内的跨时长日历事件溢出到下一行而非撑高行？

这种表格行被撑高的行为是表格的默认布局特性，不是绝对强制无法规避，但表格的结构化设计天生不适合实现「单元格内容跨行溢出」的效果——因为表格的行高度由该行内最高的单元格决定，你设置的h-[60px]只是行的最小高度，当单元格内容高度超过这个值时，整行会自动被撑高，overflow-visible在这里只会控制内容是否显示，不会改变行高的计算逻辑。

两种可行的规避方案 #

1. 改用CSS Grid布局（推荐）

Grid的灵活性比表格高得多，完全能满足日历的行/列布局需求，还能轻松实现事件跨多行的效果：

• 把整个日历容器设为网格，行对应24个小时（每行60px），列对应日期+左侧时间栏；
• 事件元素通过grid-row属性直接指定跨越的行数（比如75分钟对应1.25行，或者按分钟拆分网格线来实现更精准的定位）。

示例代码（Tailwind）：

<div className="grid grid-cols-[160px_repeat(7,1fr)] grid-rows-[repeat(24,60px)] border">
  <!-- 顶部日期栏 -->
  <div className="invisible"></div>
  {[...Array(7).keys()].map(day => (
    <div className="sticky top-0 border-x bg-white text-center">
      {getDayName(calculateDay(day), "en-US").slice(0, 3)}
    </div>
  ))}

  <!-- 时间行 + 日期列 -->
  {[...Array(24).keys()].map(hour => (
    <>
      <div className="border text-right pr-2">
        {hour === 0 ? null : `${hour.toString().padStart(2, "0")}:00`}
      </div>
      {[...Array(7).keys()].map(day => (
        <div className="border relative">
          {day === 1 && hour === 3 && (
            <div className="absolute top-0 left-0 right-0 h-[75px] bg-red-300">
              Hello
            </div>
          )}
        </div>
      ))}
    </>
  ))}
</div>

2. 表格内用相对定位嵌套绝对定位（保留表格结构）

如果坚持用表格，可以给目标单元格设置position: relative，然后把事件内容放在一个绝对定位的子元素里，这样事件会溢出到下一行，且不会撑高当前行：
修改你现有代码中的事件单元格部分：

<!-- 替换原来的事件td -->
<td className="relative border">
  <div className="absolute top-0 left-0 right-0 h-[75px] bg-red-300">
    Hello
  </div>
</td>

同时要确保表格的行保持h-[60px]的高度，这样事件元素就会超出当前行的范围，覆盖到下面的单元格。如果需要处理事件的层级冲突，可以调整z-index属性。

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