테이블 내부 위치 지정 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> 내부의 사업부를 부착하지? 참조 this solution

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

그렇지 않으면 당신은 동적으로 자바 스크립트와 위치를 계산해야 할 것입니다,하지만 지저분한 얻을 수 있습니다. 순수 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 내부의 크기도 조정해야한다는 것입니다. 예를 들어 이벤트가 이틀 동안 계속되는 경우, 프레임을 작게 만들 때도 동일하게 유지되어야합니다. 지금은 프레임을 더 작게 만들면 여러 날에 걸칠 수 있습니다. – user3111525

테이블 내부 위치 지정 div

답변

관련 문제