Абсолютная позиция Div внутри моего стола превышает таблицу и обертывание div

Question

У меня есть календарь, который я использую, который растягивается далеко за пределами контейнера. Я попытался сменить переполнение на скрытое, добавив оболочку div вне контейнера, переключившись на относительное позиционирование и многое другое, но все же он не останется внутри параметра таблицы. Вот ссылка на мою скрипку ... Вы заметите, что такие предметы, как 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. надеюсь, это поможет вам.