在表格内的表格上设置隐藏溢出 [英] Setting hidden overflow on a table within a table

问题描述

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

I have a table (lets call it calendartable) that draws sort of a calendar view. If there is an appointment on the shown day, a table (lets call it appointmenttable) is drawn within the relevant cell (let's say 1 row = 30 mins, if an appointment lasts 2hours, it covers 4 rows set by giving the cell a rowspan of 4) of the calendartable. The appointmenttable shows some details concerning the appointment.

我遇到的问题如下：
约会表根据金额它包含的信息。这可能会导致冗长的约会，几乎没有任何信息显示短的约会与大量的信息。

The problem I have is the following: The appointment table is scaled in function of the amount of information it contains. This might cause lengthy appointments with few information to appear shorter than short appointments with a lot of information.

我试图创建一个包含所有表格的约会样式元素overflow：hidden。这没有结果。
当我手动将div高度设置为10px（行高至少为50px）时，约会表会显示为它应该（只有部分信息可用）。

I tried creating a div in the appointmenttable containing all the tablerows and giving that a style element "overflow:hidden". This gives no result. When I manually set the divs height to let's say 10px (with the row's height being at least 50px), the appointmenttable is shown as it should (with only parts of the information available).

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

A workaround might be to retrieve the rowspan it covers and then setting the appointmenttable's max height to that amount * the rowheight, but I was wondering if there is a cleaner way.

以下是代码的样子：

Here's what the code looks like:

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

推荐答案

这是怎么回事？ 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> 不存在。

The red bit's scrollable. Also, if your event lasts for more cells, just increase the rowspan (and make sure that the <td> in the next row in that column doesn't exist.

这篇关于在表格内的表格上设置隐藏溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！