I have 6-rows table (highlighted by blue on the picture below).
According the idea, the table must evenly fill the vertical space, it means the body cells must have same height at least if no overflowing content. For the boiling down, I have removed everything from the cells. For some reason, the cells of last row takes less height that ones of the previous rows.
The HTML’s body is:
<div class="MainLayout">
<div class="MainLayout-UpperFixedContentSlot">
<header class="Header">
<button class="HamburgerMenuButton--YDF Header-Button MainLayout-HamburgerMenuButton" type="button">
<!-- ... -->
</button>
</header>
</div>
<div class="MainLayout-Sidebar">
<nav class="NavigationMenu">
<ul>
<!-- ... -->
</ul>
</nav>
</div>
<main class="MainLayout-SpecificContent">
<div class="CalendarPage-SpecificContent MainLayout-SpecificContentFillingElement">
<div class="TabsList--YDF CalendarPage-TabsList" role="tablist" aria-label="Select View">
<button class="Tab--YDF" role="tab" type="button" id="MONTH_OVERVIEW--TAB" tabindex="-1" aria-selected="true" aria-controls="MONTH_OVERVIEW--TAB_PANEL"><span class="Tab--YDF-Label">Month</span>
</button>
<button class="Tab--YDF" role="tab" type="button" id="WEEK_OVERVIEW--TAB" tabindex="0" aria-selected="false" aria-controls="WEEK_OVERVIEW--TAB_PANEL"><span class="Tab--YDF-Label">Week</span>
</button>
<button class="Tab--YDF" role="tab" type="button" id="DAY_OVERVIEW--TAB" tabindex="0" aria-selected="false" aria-controls="DAY_OVERVIEW--TAB_PANEL"><span class="Tab--YDF-Label">Day</span>
</button>
</div>
<div class="TabPanel--YDF CalendarPage-TabPanel CalendarPage-TabPanel" role="tabpanel" id="MONTH_OVERVIEW--TAB_PANEL" tabindex="-1" aria-labelledby="MONTH_OVERVIEW--TAB">
<table class="MonthViewer CalendarPage-MonthViewer">
<thead>
<tr>
<th class="MonthViewer-DayTitleCell MonthViewer-DayTitleCell__Holiday" scope="col">Sunday</th>
<th class="MonthViewer-DayTitleCell" scope="col">Monday</th>
<th class="MonthViewer-DayTitleCell" scope="col">Tuesday</th>
<th class="MonthViewer-DayTitleCell" scope="col">Wednesday</th>
<th class="MonthViewer-DayTitleCell" scope="col">Thursday</th>
<th class="MonthViewer-DayTitleCell" scope="col">Friday</th>
<th class="MonthViewer-DayTitleCell MonthViewer-DayTitleCell__Holiday" scope="col">Saturday</th>
</tr>
</thead>
<tbody>
<tr>
<td class="MonthViewer-DayCell"></td>
<td class="MonthViewer-DayCell"></td>
<td class="MonthViewer-DayCell"></td>
<td class="MonthViewer-DayCell"></td>
<td class="MonthViewer-DayCell"></td>
<td class="MonthViewer-DayCell"></td>
<td class="MonthViewer-DayCell"></td>
</tr>
<tr><!-- As above --></tr>
<tr><!-- As above --></tr>
<tr><!-- As above --></tr>
<tr><!-- As above --></tr>
<tr><!-- As above --></tr>
</tbody>
</table>
</div>
<div class="TabPanel--YDF" role="tabpanel" id="WEEK_OVERVIEW--TAB_PANEL" tabindex="0" aria-labelledby="WEEK_OVERVIEW--TAB" hidden=""></div>
<div class="TabPanel--YDF" role="tabpanel" id="DAY_OVERVIEW--TAB_PANEL" tabindex="0" aria-labelledby="DAY_OVERVIEW--TAB" hidden="">
<!-- ... -->
</div>
</div>
</main>
</div>
Here is the full HTML and CSS of above page (please download the whole project if you want to check the output in your browser).
1