javascript - 我的表格内的绝对位置 Div 超出了表格和包装 div

Question

我有一个正在使用的日历，它远远超出了容器。我试过将溢出更改为隐藏，在容器外添加一个包装器 div，切换到相对定位等等，但它仍然不会留在表的参数内。这是我的 fiddle 的链接...您会注意到诸如 3 天 session 之类的元素不会在单元格内结束，而是会延伸过去。

这是 css 部分，html 部分又长又笨重，因为它呈现日历。

<style type="text/css">
    .days.theWeekend {
        background: #333;
    }
    .main {
        width: 1863px;    }
    .month {
        background-color: black;
        font: bold 12px verdana;
        padding: 5px;
        color: white;
    }
    .daysofweek {
        background-color: gray;
        font: bold 12px verdana;
        color: white;
        float: left;
        width: 49px;
        border-right: 1px solid #EEEEEE;
        text-align: center;
    }
    .days {
        font-size: 12px;
        font-family: verdana;
        color: black;
        background-color: #fff;
        float: left;
        width: 49px;
        border-right: 1px solid #EEEEEE;
        height: 100px;
        text-align: center;
        overflow: visible;
    }
    .days #today {
        font-weight: bold;
        color: red;
    }
    .eventBar {
        /* width: initial !important; */
        height: 18px;
        background-color: red;
        /*          margin: 10px 0 0 2px; */
        position: absolute;
        color: #fff;
        text-align: center;
    }

    .eventBar > a {   
        color: #fff;
    }

    .eventBarPurple {
        height: 18px;
        background-color: red;
        margin: 10px 0 0 2px;
        position: absolute;
        color: #fff;
        text-align: center;
    }

    .eventBarPurple > a {   
        color: #fff;
    }
    .eventBar.thisSiteOrigin {
        background: #0022ff;
    }

    span.monthNumber {
        display: block;
    }

    .ms-rte-embedcode.ms-rte-embedwp {
        width: 2000px;
    }

    table.main {
        width: 100%;
    }
</style>

https://jsfiddle.net/t0zj6e5w/

Answer 1

需要添加以下css:

table#calendar {
overflow: hidden;
position: absolute;
}

div#tablewrapper {
position: relative;
}