jquery - TD 中元素大于其父级的表

Question

我正在尝试使用 jQuery UI 在 HTML/CSS/JS 中构建计划日历。事实上，我需要在 x 轴上显示一天中的小时数(一个 TD = 一小时，大于 20 像素)，在 y 轴上显示不同的研讨会。通过拖放 jQuery，我想在其中放置一个代表干预的 div。当然，干预可以延长一小时、两小时、三小时或更长时间。

所以我想放置一个比他的父TD大但不修改他的大的div。

有什么想法吗？

PS:对不起，如果我的英语不如你，我是法国新手程序员。

这是我的 HTML 页面:

<table>
    <tr>
        <td class="snaponit"> </td>
        ...
        <td class="snaponit"> </td>
        <td class="snaponit">
            <div id="draggable" class="draggable ui-widget-content" style="position: absolute; right: 0; left: 0;">
                <p>Operation to be dragged on the grid.</p>
            </div>
        </td>
        ...
        <td class="snaponit"> </td>
    </tr>
    <tr>
        ...
    </tr>
    <tr>
        ...
    </tr>
    <tr>
        ...
    </tr>
</table>

具有一定行数的表，其中包含 24 td。并在其中一个上放置了一个 div，可拖动，比他的 td 大。

这是我的CSS:

td {
    height: 100px;
    width: 20px;
    background-color: lightgray;
    border: solid gray 1px;
    overflow-x: visible;

}

table {
    position: relative;
    margin: 25px 25px 25px 25px;
}

tr {
    width: 480px;
}

我尝试将属性的位置设置为“相对”、“绝对”等，但这些组合均无效。我的 Div 仍在强制她调整大小的 td。

Answer 1

基本上，您所追求的是这样的:

div {
  overflow-y: visible;
}

但显然，这并不总是开箱即用。

请参阅here就有关此实现的一些问题进行相当冗长的讨论，包括可能的解决方法。