一種のカレンダー ビューを描画するテーブル (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>