The table on the page shifts position when viewed on different devices, sometimes not remaining between the header and footer

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:

  1. 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%);
  1. 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.

Answer №1

To utilize the absolute positioning in a table, the parent container must have a relative position.

Example:

<div class="container">
<table>
</table>
</div>
.container {
position:relative;
width:100%;
height:100%;
}
.container table {
   position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}

Using display properties can provide an easier solution rather than just relying on positions.

I trust this explanation was helpful to you.

Answer №2

With the guidance of @Andrej, I successfully resolved the issue.

I utilized flexbox to organize the layout of the entire webpage, implementing a fixed header and footer while allowing the 'rest' of the content to expand as needed without causing any disruptions. By exploring examples on Google, particularly by searching for 'flexbox fixed footer,' I found helpful resources that made the process straightforward. One particular site that was instrumental in assisting me was: https://dev.to/akshay_rajput/keep-footer-at-bottom-of-page-using-flexbox-4a6f.

I appreciate all the assistance provided.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve information from the database and showcase it in a competitive ranking system

Here is the HTML and CSS code for a leaderboard: /* CSS code for the leaderboard */ To display the top 5 in the leaderboard, PHP can be used to fetch data from the database: <?php // PHP code to retrieve data from the database ?> The current ou ...

Retrieve information from Node.js using Express

I am working on a server with Node.js and using Express to create a web application. I have successfully implemented a function called rss_interrogDB that retrieves an array from a database. Now, I am trying to use this array to display a list on the HTML ...

The installation of Node on Ubuntu 18.04 encountered an error

Could someone assist me with this problem? I initially had node installed, then uninstalled it using the rm -rf command following online suggestions. Now I am trying to reinstall it using nvm install node However, I'm encountering the following error ...

deactivate a vessel, causing all of its contents to be rendered inactive

Hi there, I am in search of a container that has the ability to disable all elements within it, not just inputs but also images and other elements without the disabled property. I do not want to hide the container, but rather disable it. Do you know if suc ...

Determining the number of columns and rows within an HTML table

Is there a way to determine the number of columns and rows in an HTML file? How can we accurately count the total number of td tags present within the HTML file? ...

Issues with Bootstrap glyphicon not functioning correctly on mobile devices and Internet Explorer

Within my template, there is a navigation button positioned on the left side of the page that remains fixed as the user scrolls down. When clicked, this button triggers a menu to appear. Embedded within this button is a bootstrap glyphicon: <div class ...

Can you explain the meaning of this compound CSS selector?

.btnBlue.btnLtBlue Is this referring to an element that has both the classes btnBlue and btnLtBlue applied? ...

What does the term "the selected font size" mean when defined in em units?

Exploring the query raised in this post: Why em instead of px?, the top voted response sheds light on the nature of em: The unit 'em' is not fixed but rather relative to the current font size. It varies according to the user's chosen font p ...

Creating mock objects for unit testing is a valuable skill to have in your coding

What is the best approach for writing test cases as a beginner? I need guidance on how to write test cases effectively. Exploring Angular functions and classes. picklistScroll() { const picklistWrapper = document.getElementsByClassName('pic ...

Issue encountered while trying to modify the color of a placeholder

Whenever I attempt to modify the placeholder's color: ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #909; opacity: 1; } : ...

Encountering a syntax error when attempting to generate a div dynamically with jQuery

I am in the process of creating a view application form using Bootstrap after submitting a form. Initially, I created it utilizing two 'div' elements. Now, I am exploring how to dynamically generate a div upon clicking a button: <i> Sectio ...

Contrast the differences between arrays and inserting data into specific index positions

In this scenario, I have two arrays structured as follows: arr1=[{room_no:1,bed_no:'1A'}, {room_no:1,bed_no:'1B'}, {room_no:2,bed_no:'2A'}, {room_no:3,bed_no:'3A'}, {room_no:3,bed_no:'3B ...

The jQuery function is not functioning correctly

Currently, I am in the process of setting up an accordion menu using jQuery and CSS3. Everything is working perfectly fine so far except that the menu always opens upon page load and the code to hide it is not functioning as intended. Here's the link ...

What is the best way to utilize ngStyle in combination with Interpolation?

Within my application, I am faced with a challenge involving two slide bars that generate values ranging from 1 to 100. Based on these generated values, I aim to adjust the margin of a div element in accordance with the percentage output. Despite conductin ...

Styling applied exclusively to the field for mobile devices

As I work on creating a navigation bar using Bulma and Vue.js, I encounter an issue with the dropdown menu behavior. When the navbar collapses into the hamburger menu, the dropdown list remains in display: block; mode. To address this, I attempted a workar ...

Troubleshooting problems with jQuery mmenu on Windows Phone (IE Mobile)

I am currently working on optimizing the mobile version of a website, utilizing jQuery MMenu for the menu. The functionality is seamless on various phones and tablets I have tested, except for Windows Phones... Even with the plugin configured with the "po ...

Servlet unable to retrieve parameters from Form due to unexpected NULL values

Here is a basic form element for you to review: <form action="Test" method="POST" enctype="multipart/form-data"> <input type="text" name="first_name" title="First Name"></input> <input type="text" name="last_name" title="Las ...

Utilizing separately generated elements from ngFor

I am currently working with an angular2 component that generates a list of chapters using an *ngFor= tag. However, I am facing an issue where I am unable to individually target these chapters in my ng2 component to highlight the selected chapter. I expecte ...

Issue encountered while iterating over an array using NgFor

I am currently facing an issue while attempting to create a table for viewing certificates in an account using Angular. The error I am encountering is as follows: ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are ...

Special characters in JSON files may cause loading issues in Nativescript Angular

Can someone help me with an issue I'm having while trying to retrieve a JSON file from the server using a GET method? { "myKey": [{ "code" : "RMB", "symbol" : "¥", }] } When making the Nativescript GET request, ev ...