Html 在表中的表上设置隐藏溢出

我有一个表（我们称之为calendartable），它可以绘制某种日历视图。如果在所示日期有约会，则在日历表的相关单元格内绘制一个表（称之为appointmenttable）（假设1行=30分钟，如果约会持续2小时，则它将覆盖通过给单元格4行跨度设置的4行）。 appointmenttable显示了有关约会的一些详细信息

我的问题如下： 约会表根据其包含的信息量进行缩放。这可能会导致信息较少的长时间约会比信息较多的短时间约会显得更短

我尝试在appointmenttable中创建一个包含所有tablerows的div，并给它一个样式元素“overflow:hidden”。这没有结果。 当我手动将divs height设置为10px（行的高度至少为50px）时，AppointTable将按其应有的方式显示（仅提供部分信息）

解决方法可能是检索它所覆盖的行范围，然后将appointmenttable的最大高度设置为该值*行高度，但我想知道是否有更干净的方法

下面是代码的样子：

<table id = "calendartable">
    <tr>
        <td align = "left">10:00</td>
        <td>nothing here</td>
    </tr>
    <tr>
        <td align = "left">10:30</td>
        <td rowspan = "2">
            <table id = "appointmenttable">
                <tr><td>Here is the information</td></tr>
                <tr><td>Here is some more information</td></tr>
            </table>
        </td>
    </tr>
    <tr>
        <td align = "left">11:00</td>
    </tr>
    <tr>
        <td align = "left">11:30</td>
        <td>nothing here</td>
    </tr>
</table>

10:00
这里什么都没有
10:30
这是信息
这里有更多的信息
11:00
11:30
这里什么都没有

这是怎么回事

10:00
这里什么都没有
10:30
这是信息
这里有更多的信息。这里有更多的信息。这里有更多的信息。这里有更多的信息。这里有更多的信息。这里有更多的信息。这里有更多的信息。这里有更多的信息。这里有更多的信息。这里有更多的信息。这里有更多的信息。
11:00
11:30
12:00
这里什么都没有
​
/*CSS*/
1.预约表{
宽度：300px；
}
.预约表{
边框：1px纯黑；
填充：4px；
保证金：0；
高度：20px；
溢出：隐藏；
}
.预约时间{
背景：红色；
填充：4px；
排名：0；
左：0；
位置：绝对位置；
}
.约会表.约会槽包装器{
位置：相对位置；
背景：蓝色；
填充：0；
溢出：自动；
}
​

---

红色部分是可滚动的。此外，如果您的事件持续时间更长，只需增加行跨度即可（并确保该列下一行中的

不存在。

您应该编写，而不是。您的浏览器不知道什么是日历表，当它首先看到没有表的tr时会惊慌失措。内部表的行有不匹配的tr元素：

这是信息
应该是
这是inf格式化
你也可以发布样式表吗？并在jsfiddle上做一个工作示例。neti编辑了代码，它只是对代码的简要概述，给出了结构的概念。你不必注意这方面的小矛盾
<table class="appointment-table">
    <tr>
        <td>10:00</td>
        <td>nothing here</td>
    </tr>
    <tr>
        <td>10:30</td>
        <td rowspan="3" class="appointment-slot-wrapper">
            <div class="appointment-slot">
            <div>Here is the information</div>
            <div>Here is some more information. Here is some more information. Here is some more information. Here is some more information. Here is some more information. Here is some more information. Here is some more information. Here is some more information. Here is some more information. Here is some more information. Here is some more information.</div>
            </div>
        </td>
    </tr>
    <tr>
        <td align = "left">11:00</td>
    </tr>
    <tr>
        <td align = "left">11:30</td>
    </tr>
    <tr>
        <td align = "left">12:00</td>
        <td>nothing here</td>
    </tr>
</table>​

/* CSS */
.appointment-table {
    width: 300px;
}
.appointment-table td {
    border: 1px solid black;
    padding: 4px;
    margin: 0;
    height: 20px;
    overflow: hidden;
}
.appointment-slot {
    background: red;
    padding: 4px;
    top: 0;
    left: 0;
    position: absolute;
}
.appointment-table .appointment-slot-wrapper {
    position: relative;
    background: blue;
    padding: 0;
    overflow: auto;
}
​