I've searched for answers but haven't found anything that works for me. I'm looking to have 2 rows of 6 elements at the bottom of the page and have them stick there as the page scrolls. I tried using a table, which almost worked.
.center {
position: -webkit-sticky;
/* Safari */
position: sticky;
bottom: 10px;
margin-bottom: 10px;
flex-shrink: 2;
padding-bottom: 10px;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee8c81819a9d9a9c8f9eaedbc0dfc0dd">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71131e1e05020503100131445f405f42">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<div class="fixed-bottom center">
<table border="1" class="center">
<tr>
<th>
<h4>Val1</h4>
</th>
<th>
<h4>Val2</h4>
</th>
<th>
<h4>Val3</h4>
</th>
<th>
<h4>Val4</h4>
</th>
<th>
<h4>Val5</h4>
</th>
<th>
<h4>Val6</h4>
</th>
</tr>
<tr>
<th>
<input type="text" />
</th>
<th>
<input type="text" />
</th>
<th>
<input type="text" />
</th>
<th>
<input type="text" />
</th>
<th>
<input type="text" />
</th>
<th>
<input type="text" />
</th>
</tr>
</table>
</div>If you have any tips on how I can achieve this, please let me know!
Thank you
J