How my page looks (header table footer): https://i.stack.imgur.com/U6tdO.png

How my page looks (header table footer) when responsive (smaller width): https://i.stack.imgur.com/zsGkc.png

There are 2 main problems:

• table goes over the header,
• footer goes under the header, somehow ignoring the table, and goes over the table.

The main problem is that I want to fix the table to be between the header and the footer, which I've done, but the table to still be in the middle of the page, which is my problem.

What I think might be the problem:

1. the method I use to position the table in the middle of the page:

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

2. the method I use to position the footer at the bottom of the page:

• when no responsive:

    position: fixed;
    bottom: 0;

• when responsive:

position: relative;

I want to mention that if I don't try to position the table in the middle of the page, that means I comment on the code from What I think it might be the problem point 1. => the page looks good: https://i.stack.imgur.com/Tgf8S.png

So, because of this, I've tried to apply different methods to position the table in the middle of the page but it didn't work.

I've tried multiple methods, even putting limitations on my table and footer, which means setting the top and height of them but it still doesn't work quite well.

CodePudding user response：

position:relative; By giving, the position absoulte you use in the table works, the parent container must be relative.

Sample:

<div >
<table>
</table>
</div>

.container {
position:relative;
width:100%;
height:100%;
}
.container table {
   position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}

You can solve it more easily with display properties, not just positions.

I hope it helped.

CodePudding user response：

The problem is partially solved, which means I only put the table in the middle of the horizontal axes. If I try to put it in the vertical axes, when responsive, the table height grows and some of it goes over the header and under the footer...

How it worked for me:

• the header is the same, with no position or display or anything for it.

• the footer is the same (you can see this in the body of the question).

• the table is where I changed the way I positioned it in the middle of the page. Now I used flexbox, as @Andrej told me to. The code is very basic, but you need to put your table content into a parent tag, for example, div. To put the div in the middle of the page, you need to:

    /* The element behaves like a block element and lays out its content according to the flexbox model */
    display: flex;
    /* Vertical axes */
    align-items: center;
    /* Horizontal axes */
    justify-content: center;
  
    /* ! And you need to set a height in order to position it on the vertical axes (but I don't use this because this is the cause of the table when responsive) */
    height: 70vh; /* this value is just for my case */