Question

我有一个用表格实现的日历，因为日历是表格数据。我想知道如何实现事件，以便更新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>

Answer 1

为什么不将div粘贴在正确的<td>内？见this solution

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

否则你必须用javascript动态计算位置，但这可能会变得混乱。绝对应该首选纯HTML / CSS解决方案。

将div放在一张桌子里面

1 个答案: