1

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

我遇到的问题如下：约会表根据它包含的信息量进行缩放。这可能会导致信息很少的冗长约会比信息很多的短期约会显得更短。

我尝试在包含所有表行的约会表中创建一个 div，并给它一个样式元素“溢出：隐藏”。这没有结果。当我手动将 div 高度设置为 10 像素（行高至少为 50 像素）时，约会表会按原样显示（只有部分信息可用）。

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

代码如下所示：

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

1 回答 1

0

这个怎么样？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;
}
​

在此处输入图像描述

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

于 2012-04-05T11:19:09.080 回答