Here is a link to see how my page looks with the header, table, and footer: https://i.sstatic.net/U6tdO.png
If you want to see how it looks when responsive (with smaller width), check out this link: https://i.sstatic.net/zsGkc.png
I have encountered 2 main problems:
- The table overlaps the header,
- The footer ends up beneath the header and on top of the table.
The primary issue I am facing is getting the table to be positioned between the header and footer while still maintaining the center alignment on the page.
I suspect that the problem lies with:
- The method I am using to position the table in the center of the page:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- The method I am using to keep the footer at the bottom of the page:
- When not responsive:
position: fixed;
bottom: 0;
- When responsive:
position: relative;
If I do not attempt to center the table on the page by commenting out point 1 from 'What I think might be the problem', the page appears fine: https://i.sstatic.net/Tgf8S.png
Despite trying different methods to center the table on the page, I have not been successful. Even setting constraints for the table and footer, such as defining their top and height, did not yield satisfactory results.