使用flexbox将表格单元格调整到其内部的div

Answer 1

您走在正确的道路上。我对你的风格做了一些调整......如下。

我将overflow hide与flex结合使用来隐藏/显示溢出的内容。 （截断奖励也添加在那里；-）

我用“auto”和“100%”替换了大部分最小宽度和最小高度规则，以使这些约会框具有其容器的完整宽度。

最后，您需要重置第一行单元格的左/右填充并指定“边框：1px纯透明”或完全删除边框。

.calendar {
    font-family: 'Arial', helvetica, sans-serif;
    width: 100%;
}

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

.calendar-row:first-child > td.day-cell {
    padding-right: 0;
    padding-left: 0;
}

.calendar-row {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
}

.calendar-row th {
  display: flex;
  justify-content: center;
  align-items: center;
}

.empty-day-cell, .day-cell {
    border: 1px solid transparent !important;
    border-radius: 3px;
    margin: 0.1rem;
    padding: 0;
    position: relative;
    width: auto;
    height: auto;
    text-align: left;
}

.day-cell {
    background: #eeeeeecc;
    padding: 1.5rem 0.25rem 0 0.25rem;
    overflow: hidden;
    transition: all .2s ease;
}

.day-number {
    background: #ffffffcc;
    border-top-right-radius: 3px;
    margin: 0;
    padding: 0.1rem 0.2rem;
    position: absolute;
    top: -1px;
    right: -1px;
    font-size: 12px;
}

.appointment {
    width: 100%;
    border-radius: 10px;
    color: black;
    background: #ccb9ffcc;
    box-sizing: border-box;
    margin: 0 0 0.25rem 0;
    padding: 0.1rem 0.5rem;
    font-size: 13px;
    text-align: left;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.day-cell:has(.appointment):hover {
    background-color: #e1daf0cc;
    overflow: unset !important;
    flex-grow: 1 !important;
    padding: 1.5rem 0.75rem 0 0.75rem;
}

.day-cell:has(.appointment):hover > div {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: unset !important;
    white-space: nowrap;
}

<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>
                
            
                <td class="day-cell">
                    <span class="day-number">9</span>
                </td>
                
            
        </tr>
        <tr class="calendar-row">
            
                <td class="day-cell">
                    <span class="day-number">10</span>
                </td>
                
            
                <td class="day-cell">
                    <span class="day-number">11</span>
                </td>
                
            
                <td class="day-cell">
                    <span class="day-number">12</span>
                </td>
                
            
                <td class="day-cell">
                    <span class="day-number">13</span>
                </td>
                
            
                <td class="day-cell">
                    <span class="day-number">14</span>
                </td>
                
            
                <td class="day-cell">
                    <span class="day-number">15</span>
                </td>
                
            
                <td class="day-cell">
                    <span class="day-number">16</span>
                </td>
                
            
        </tr>
        <tr class="calendar-row">
            
                <td class="day-cell">
                    <span class="day-number">17</span>
                </td>
                
            
                <td class="day-cell">
                    <span class="day-number">18</span>
                </td>
                
            
                <td class="day-cell">
                    <span class="day-number">19</span>
                </td>
                
            
                <td class="day-cell">
                    <span class="day-number">20</span>
                </td>
                
            
                <td class="day-cell">
                    <span class="day-number">21</span>
                </td>
                
            
                <td class="day-cell">
                    <span class="day-number">22</span>
                        <div class="appointment">14:15 - Some Job</div>
                        <div class="appointment">16:15 - Other Task</div>
                        <div class="appointment">18:15 - Even Longer Task</div>
                </td>
                
            
                <td class="day-cell">
                    <span class="day-number">23</span>
                </td>
                
            
        </tr>
        <tr class="calendar-row">
            
                <td class="day-cell">
                    <span class="day-number">24</span>
                </td>
                
            
                <td class="day-cell">
                    <span class="day-number">25</span>                 
                        <div class="appointment">14:00 - Presentation</div>
                </td>
                
            
                <td class="day-cell">
                    <span class="day-number">26</span>

                </td>
                
                <td class="day-cell">
                    <span class="day-number">27</span>
                </td>
                
                <td class="day-cell">
                    <span class="day-number">28</span>
                     <div class="appointment">10:30 - Training Location</div>
                </td>
                
            
                <td class="day-cell">
                    <span class="day-number">29</span>
                </td>
                
            
                <td class="day-cell">
                    <span class="day-number">30</span>
                </td>
       
        </tr>
    </tbody>
</table>