I'm trying to create a Bootstrap 4 calendar using a table for those with vision disabilities which will be displayed using full width & height of the browser. I succeeded with the someone's help in another post, but I used a span with absolute positioning which I think is a bit hackish. I want to use Bootstap 4 SVG arrows to select the "previous" and "next" month in the header area but the last row of the calendar keeps getting cut-off.
Previous solution using spans but works full width & height: https://jsfiddle.net/2gb3a4ty/
Current solution which cuts off the last row: https://jsfiddle.net/da79hwqu/
index.html
body {
overflow: hidden;
}
#weekHeader {
height: 2%;
}
.headerDay {
width: calc(100vw / 7);
}
#prev:hover,
#next:hover,
.day {
cursor: pointer;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<table class="table table-bordered vh-100">
<thead>
<tr id="monthHeader">
<div id="header" class="d-flex align-middle justify-content-around mt-3">
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" fill="currentColor" class="bi bi-arrow-left-square" id="prev" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm11.5 5.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
</svg>
<h1 class="d-inline-block align-middle" id="month">January</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" fill="currentColor" class="bi bi-arrow-right-square" id="next" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm4.5 5.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
</svg>
</div>
</tr>
<tr class="text-center" id="weekHeader">
<th class="headerDay">Sun</th>
<th class="headerDay">Mon</th>
<th class="headerDay">Tues</th>
<th class="headerDay">Wed</th>
<th class="headerDay">Thur</th>
<th class="headerDay">Fri</th>
<th class="headerDay">Sat</th>
</tr>
</thead>
<tbody>
<tr>
<td class="day">1</td>
<td class="day">2</td>
<td class="day">3</td>
<td class="day">4</td>
<td class="day">5</td>
<td class="day">6</td>
<td class="day">7</td>
</tr>
<tr>
<td class="day">8</td>
<td class="day">9</td>
<td class="day">10</td>
<td class="day">11</td>
<td class="day">12</td>
<td class="day">13</td>
<td class="day">14</td>
</tr>
<tr>
<td class="day">15</td>
<td class="day">16</td>
<td class="day">17</td>
<td class="day">18</td>
<td class="day">19</td>
<td class="day">20</td>
<td class="day">21</td>
</tr>
<tr>
<td class="day">22</td>
<td class="day">23</td>
<td class="day">24</td>
<td class="day">25</td>
<td class="day">26</td>
<td class="day">27</td>
<td class="day">28</td>
</tr>
<tr>
<td class="day">29</td>
<td class="day">30</td>
<td class="day">31</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>The browser is autocorrecting the missing th in the tr of your thead and puts your div#header outside the table.
You simply need to properly use the thead tag, which requires a tr and th tag.
You can make it work with flex-box by changing the tr to th with colspan="7" but then the browser will autocorrect the missing tr.
Instead you can try this:
<thead>
<tr id="monthHeader">
<th colspan="7" id="header" class="text-center">...</th>
</tr>
</thead>
d-flex Is not going to work on a th tag as it is a different type of display "table-cell" which uses the colspan.