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

Question

我有一个表（我们称之为calendartable），它绘制了一种日历视图。如果在显示的日期有预约，则在相关单元格内绘制一个表格（让我们称之为可预约）（假设1行= 30分钟，如果预约持续2小时，则通过给单元格设置行数来覆盖4行4）calendartable。 预约表显示了有关预约的一些细节。

我遇到的问题如下： 约会表根据其包含的信息量进行缩放。这可能导致冗长的约会，几乎没有信息显得短于有大量信息的短约会。

我尝试在约会中创建一个包含所有表格的div，并给出一个样式元素“overflow：hidden”。这没有结果。 当我手动设置div高度让我们说10px（行的高度至少为50px）时，可以显示预约表（只有部分信息可用）。

解决方法可能是检索它所涵盖的行数，然后将约会的最大高度设置为该行数*行高，但我想知道是否有更清洁的方法。

这是代码的样子：

<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>

Answer 1

这是怎么回事？ http://jsfiddle.net/aramk/wHEm6/3/

<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;
}
​

红色位可滚动。此外，如果您的事件持续更多单元格，只需增加rowspan（并确保该列中下一行中的<td>不存在。