Javascript 如何使一个表行上的div（绿线）继续到下一个表行

我正在尝试创建一个简单的日程表。如果一个事件跨越多天，我无法使一个表行的div中的事件（绿线）继续到下一行。如附图所示

请帮忙。代码：

A永不换行，始终为矩形。您必须使用两个

s

例如：

<div>Before</div>
<div>
   ... your content here ...
</div>
<div>After</div>

之前
... 你的内容在这里。。。
之后

使用第二个

，然后你可以做任何你想做的事。例如：

星期一
星期二
星期三
星期四
星期五
星期六
星期日
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14

更新： 如果每天有多个事件的多个底部边框

原件： 用你的方法你无法得到你所需要的。我对你的代码做了一些修改，希望这是你需要的

桌子{
边界塌陷：塌陷；
}
运输署{
边框底部：10px纯白；
宽度：100px；
高度：80px；
垂直对齐：顶部；
}
th{
高度：10px；
宽度：100px；
}
瑞德先生{
背景色：红色；
}
.事件{
边框底色：绿色；
}
星期一
星期二
星期三
星期四
星期五
星期六
星期日
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14

如果你不能以你希望的方式实现它，你必须在事件相关长度的下一个表格行上创建一条单独的绿线。这是一种可怕的方法，对不起。@RickCalder你会怎么做？我是新手，你能帮忙吗？你能举个例子吗？我已经编辑过了。现在检查一下。老实说，你应该用课堂来解决这个问题。亚历山大·保罗的答案是课堂。这不是你真正的方式，但它只是更好；）7点后div仍然溢出。它能在接下来的几天里持续到10点吗？是的，只是改变它的宽度。但事实上——检查亚历山大的答案。我试着用和你一样的方式做你需要的事情。亚历山大的方法更好。它不会产生bug（我的罐头）。好的。Alexander的方法是否适用于每天发生多个事件的情况？这适用于每天发生1个事件。如果每天有多个事件呢？在这种情况下，您需要一种新的方法。看看这个

<style>
table {
    border-collapse: collapse;
}

td {
    border-bottom: 10px solid white;
    width:100px;
    height:80px;
    vertical-align: top;
}

th {
    height:10px;
    width:100px;
}

.red {
    background-color: red;
}

.event {
    border-bottom-color: green;
}
</style>
<table>
    <thead>
        <tr>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
            <th>Saturday</th>
            <th>Sunday</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="red event">1</td>
            <td class="event">2</td>
            <td class="event">3</td>
            <td class="event">4</td>
            <td class="event">5</td>
            <td class="event">6</td>
            <td class="event">7</td>
        </tr>
        <tr>
            <td class="event">8</td>
            <td class="event">9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
    </tbody>
</table>