#tableWrapper { width: 100%; overflow: auto; display: flex; } #tablePlanning { margin: auto auto 20px auto; display: flex; } .planning-header { font-family: Harry-P, fantasy; border: none; border-radius: 0.2rem; background: #414141; font-size: 2rem; padding: 5px; margin: 5px 0; height: 50px; } .horaires { background: none; border: none; border-top: 1px solid #ccc; text-align: right; vertical-align: top; margin-top: -1px; /* negate the border to prevent offsest with events */ } .event { background: none; border: none; color: white; transition: 0.3s; cursor: pointer; position: absolute; width: 100%; display: flex; } .event-color { border-radius: 0.2rem; transition: 0.2s; border: none; margin: 5px 0; display: flex; width: 100%; } .event-color:hover { border-radius: 1rem; transform: scale(1.05); } .event-text { margin: auto; } .day-column { position: relative; min-width: 150px; margin: 0 5px; }