在桌子上的桌子上設置隱藏溢出

我有一張桌子（讓我們稱之爲日曆桌子）繪製某種日曆視圖。如果在所示日期有預約，則在相關單元格內繪製一張表格（讓我們稱它爲預約表格）（假設1行= 30分鐘，如果預約持續2小時，則通過給單元格劃一行來覆蓋4行4）的日曆。預約表顯示了有關預約的一些細節。在桌子上的桌子上設置隱藏溢出

我遇到的問題如下：約會表根據其包含的信息量進行縮放。這可能導致冗長的約會，只有很少的信息比短期約會的信息短。

我試着在包含所有表格的約會中創建一個div，並給出一個樣式元素「overflow：hidden」。這沒有結果。當我手動將div高度設置爲10px（行高至少爲50px）時，預約表顯示爲它應該（只有部分信息可用）。

解決方法可能是檢索它覆蓋的rowspan，然後將約會的最大高度設置爲該高度* rowheight，但我想知道是否有更清晰的方法。

下面的代碼是什麼樣子：

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

來源

2012-04-05 Mats Raemen

您應該寫

而不是< 。calendartable>您的瀏覽器不知道什麼是calendartable和怪胎當它看到TR沒有表第一 – 2012-04-05 10:51:59

你內心的表中的行已經missmatched TR元素：'

這裏是信息'應該是'這裏是信息' – 2012-04-05 10:54:59

你可以發佈樣式表嗎？並在jsfiddle.net上做一個工作示例 – HerrSerker 2012-04-05 10:59:24

回答

這個怎麼樣？ 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; 
}

enter image description here

紅色位的滾動。此外，如果您的事件持續更多單元格，只需增加rowspan（並確保該列中下一行中的<td>不存在）

來源

2012-04-05 11:19:09

太棒了！它就像一個魅力！ – 2012-04-05 12:40:29

相關問題