позиционирование div внутри таблицы

У меня есть календарь, выполненный с таблицей, так как календарь - это табличные данные. Мне интересно, как реализовать события так, чтобы положение div-события обновлялось, поскольку один свиток меняет размер окна (что также изменяет размер таблицы).позиционирование div внутри таблицы

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

При изменении размера фрейма, который делит редактор и предварительный просмотр, который вы видите, что событие перемещается на другую дату (от правильного 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

Почему бы не придерживаться DIV внутри правильного <td>? См 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

спасибо, ваше предложение находится на правильном пути. Оставшаяся проблема заключается в том, что при изменении размера рамки внутренний элемент должен также изменять размер. Я имею в виду, что если событие охватывает два дня, например, оно должно оставаться таким же, когда вы делаете кадр меньшим. Сейчас он охватывает несколько дней, когда вы делаете кадр меньше. – user3111525

позиционирование div внутри таблицы

ответ

Смежные вопросы