1

一種のカレンダー ビューを描画するテーブル (calendartable と呼びましょう) があります。表示された日に予定がある場合、テーブル (予定テーブルと呼びましょう) が関連するセル内に描画されます (たとえば、1 行 = 30 分、予定が 2 時間続く場合、セルに行スパンを与えることによって設定された 4 行をカバーします)。 of 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>
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 に答える