Force overflow of table row into next row - html

Question

I want to create a calendar component which displays the day on the top and the time on the left.
Looking at Google Calendar, they seem to be using absolute to put the events into the calendar, which I want to avoid.
The next best option to me seemed to be using a table. This option worked fine for the structure of the calendar, but now that I want to add events I have a problem:
Each row represents one hour and each row is 60px tall. Now if I add an event that lasts 75 minutes I need that event to overflow from one row to the next. But instead it just increases the height of the row where I added the event.
Is this behaviour enforced or can I circumvent it somehow?
Here is my current table code:
<table className="w-full">
<caption className="sr-only">Calendar</caption>
<tr className="sticky top-0">
<td className="invisible" />
{[...Array(days).keys()].map((day) => {
return (
<th scope="col" className="border-x bg-white">
{getDayName(calculateDay(day), "en-US").slice(0, 3)}
</th>
);
})}
</tr>
{[...Array(24).keys()].map((hour) => {
return (
<tr className="h-[60px] overflow-visible">
<th scope="row" className="w-16 border">
{hour === 0 ? null : `${hour.toString().padStart(2, "0")}:00`}
</th>
{[...Array(days).keys()].map((day) => {
return (
<>
{day === 1 && hour === 3 ? (
<td className="h-[75px] overflow-visible border bg-red-300">
Hello
</td>
) : (
<td className="border" />
)}
</>
);
})}
</tr>
);
})}
</table>