Calendar table

Flexboxes beat me :(

HTML

<table class="calendar">
    <thead>
        <tr class="calendar-row">
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
            <th>Sun</th>
        </tr>
    </thead>
    <tbody>
        <!-- Generate calendar grid -->
        <tr class="calendar-row">
            
                
                <td class="empty-day-cell"></td>
            
                
                <td class="empty-day-cell"></td>
            
                
                <td class="empty-day-cell"></td>
            
                
                <td class="empty-day-cell"></td>
            
                
                <td class="empty-day-cell"></td>
            
                <td class="day-cell">
                    <span class="day-number">1</span>
                </td>
                
            
                <td class="day-cell">
                    <span class="day-number">2</span>
                </td>
                
            
        </tr>
        <tr class="calendar-row">
            
                <td class="day-cell">
                    <span class="day-number">3</span>
                </td>
                
            
                <td class="day-cell">
                    <span class="day-number">4</span>
                </td>
                
            
                <td class="day-cell">
                    <span class="day-number">5</span>
                </td>
                
            
                <td class="day-cell">
                    <span class="day-number">6</span>
                </td>
                
            
                <td class="day-cell">
                    <span class="day-number">7</span>
                </td>
                
            
                <td class="day-cell">
                    <span class="day-number">8</span>
                </td>
                
            
               ...

CSS

.calendar {
    border-collapse: separate;
}

.calendar th, .calendar td {
    text-align: center;
    width: 100%;
}

.calendar-row {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: stretch;
}

.empty-day-cell {
    position: relative;
    min-width: 80px;
    min-height: 80px;
    border: 1px transparent #000000;
    border-radius: 5px;
}

.day-cell {
    border: 1px solid #000000;
    border-radius: 5px;
    position: relative;
    min-width: 80px;
    min-height: 80px;
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.day-number {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 12px;
}

.appointments {
    margin: 0 10%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: stretch;
}

.appointment {
    width: fit-content;
    margin-bottom: 0.5rem;
    white-space: nowrap;
    border: 1px solid #000000;
    border-radius: 10px;
    color: black;
    background: teal;
    padding: 0 10%;
}