Encountering issues on an iPhone while attempting to display a "timeline" consisting of a table content. The problem arises when 30 rows are present, but only 28 are visible on the screen. The remaining two rows are hidden behind the footer, requiring scrolling of the entire page to view them.
How can the table height be adjusted to end at the footer's start rather than at the bottom of the page?
https://i.sstatic.net/SuMFzm.jpg
https://i.sstatic.net/kgsHcm.jpg
The page structure is as follows (table content is loaded dynamically):
<div class="container-fluid p-0">
<div class="card rounded-0" id="cardTav">
<div id="bodyTavoli" class="card-body text-center">
<div class="table-responsive tableFixHead">
<table class="table table-hover" id="tableLine" border="0" style="border: none; width: 100%; margin-bottom: 0px;">
<thead id="timehead">
<tr>
</tr>
</thead>
<tbody id="timeline">
</tbody>
</table>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
</div>
</footer>
Check out the JSFiddle code (note: there is a navigation bar above the container): https://jsfiddle.net/3hvLwt6m/