Setting hidden overflow on a table within a table

问题

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.

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

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>

回答1:

How's this? 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;
}

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.

来源：https://stackoverflow.com/questions/10027174/setting-hidden-overflow-on-a-table-within-a-table

标签

html

html-table

overflow