我的 table 内的绝对位置 Div 超过了 table 并环绕 div

Question

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

这是 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;
}

Answer 2

将 .eventBar 的宽度设置为 100% !important，将高度设置为自动。然后设置 positon:relative 为 .days

.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;
    position: relative;
    overflow: visible;
}
.eventBar {
    width: 100% !important;
    height: auto;
    padding: 5px 0;
    background-color: red;
    /* margin: 10px 0 0 2px; */
    position: absolute;
    color: #fff;
    text-align: center;
}

同时将列的宽度加长一点，这样文本就不会被截断。这是示例 fiddle。希望对你有帮助。

我的 table 内的绝对位置 Div 超过了 table 并环绕 div

The Absolute Position Div inside my table exceeds the table and wrapping div

javascript

html

css

html-table

css-tables