在表格內定位div

由於日曆是表格數據，我有一個使用表格實現的日曆。我想知道如何實現事件，以便div事件的位置更新爲一個滾動窗口的大小調整（這也調整了表格的大小）。在表格內定位div

Plunker： http://plnkr.co/edit/bCZl31OZuCVN0q8vnGp0?p=preview

如果調整，其將編輯器，你會看到該事件被移動到不同的日期（從10月17日修正）預覽框。

例子：

<!DOCTYPE html> 
<html> 

    <head> 
    <style> 
     table,td,tr{border:1px solid gray;border-collapse:collapse;} 
     td{height:40px;} 
    </style> 
    </head> 

    <body> 
    <div class="events"> 
    <div class="event" style="background:red;position:relative; top:110px; left:200px; width:100px;">Meet John Doe</div> 
    </div> 
<table width="100%"> 
     <tbody> 

     <tr> 
      <td> 

      </td><td> 
       1 
      </td><td> 
       2 
      </td><td> 
       3 
      </td><td> 
       4 
      </td><td> 
       5 
      </td><td> 
       6 
      </td> 
     </tr><tr> 
      <td> 
       7 
      </td><td> 
       8 
      </td><td> 
       9 
      </td><td> 
       10 
      </td><td> 
       11 
      </td><td> 
       12 
      </td><td> 
       13 
      </td> 
     </tr><tr> 
      <td> 
       14 
      </td><td> 
       15 
      </td><td> 
       16 
      </td><td> 
       17 
      </td><td> 
       18 
      </td><td> 
       19 
      </td><td> 
       20 
      </td> 
     </tr><tr> 

      <td> 
       21 
      </td><td> 
       22 
      </td><td> 
       23 
      </td><td> 
       24 
      </td><td> 
       25 
      </td><td> 
       26 
      </td><td> 
       27 
      </td> 
     </tr><tr> 
      <td> 
       28 
      </td><td> 
       29 
      </td><td> 
       30 
      </td><td> 
       31 
      </td><td> 

      </td><td> 

      </td><td> 

      </td> 
     </tr> 
    </tbody></table> </body> 

</html>

來源

2013-10-04 user3111525

爲什麼不堅持正確的<td>裏面的DIV？見this solution

<td> 
    17 
    <div class="event" style="background:red;">Meet John Doe</div>     
</td>

否則，您必須動態地計算使用JavaScript的位置，但可能會導致混亂。純粹的HTML/CSS解決方案應該是首選。

來源

2013-10-04 19:00:10 chopper

是的，但如果您更改跨越多天的事件的div的寬度，它將無法正常工作...... – user3111525

那麼在這種情況下，您可以將'max-width'和'overflow：visible'分配給''。當您創建div時，您只需在週末處理包裝。但是你必須這樣做。請參閱[本演示]（http://plnkr.co/edit/FPhaeEhvU8hO9S2cORfy?p=preview）。 – chopper

謝謝，你的建議是在正確的軌道上。剩下的問題是，當你調整框架的div時，div也應該調整大小。我的意思是，如果事件跨越兩天，例如，它應該保持相同，當你讓框架變小。現在它跨越了多天，當你使框架變小。 – user3111525

在表格內定位div

回答

相關問題