Position sticky both vertically and horizontally-CodePudding

Im struggling to get an example to stick both vertically and horizontally.

So I am able to get the table header to stick. Im trying to get the Header and Footer to stick and not move when scrolling horizontally

Here is a link to the demo.

aside {
  width: 200px;
  position: fixed;
  height: 100vh;
  background: red;
}

main {
  margin-left: 220px;
  background: beige;
}

header {
  height: 100px;
  background: teal;
  position: sticky;
  left: 220px;
}

th {
  position: sticky;
  top: 0;
  background: aqua;
}

footer {
  background: green;
  height: 2000px;
} 

<html>
  <body>
    <aside>aside</aside>
    <main>
      <header>
      header
    </header>
      <table>
        <tr><th>Test</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
      </table>
      <footer>
      </footer>
    </main>
  </body>
</html>

CodePudding user response：

Essentially it cannot be done canonically using pure CSS.

What would be needed is a sticky-x and a sticky-y on separate elements inside the one scroll container, but there is no such thing.

The header and footer are not sticking because they need a containing block and a scrolling container. If you put a 'container' around your 'main' and do CSS (using classes):

.container {
    margin-left: 220px;
}

.main {
    background: beige;
    overflow-x: auto;
}

it should fix that problem, BUT the sticking on the table header will stop working. (And the footer needs 'position: sticky' added too.)

You could probably get a specific solution for a specific layout using positioning or gridding, and certainly using javascript, but to do that you need to advise exactly when and how you want the table structure to scroll relative to the other elements.

CodePudding user response：

I was able to come up with a solution.

I had to use a combination of calc and z-index to get what I needed. I also had to make sure no spacing was coming from the layout components.

Here is the link.

* {
  margin: 0;
  padding: 0;
  background: #ccc;
  box-sizing: border-box;
  -webkit-border-horizontal-spacing: 0;
  -webkit-border-vertical-spacing: 0;
}

body {
  overflow-y: scroll;
}

aside {
  width: 200px;
  position: fixed;
  height: 100vh;
  background: red;
  z-index: 50;
}

main {
  margin-left: 200px;
  background: #556B2F;
  width: min-content;
}

header, footer {
  height: 100px;
  position: sticky;
  left: 200px;
  width: calc(100vw - 200px - 15px); //15px is width of the scrollbar
}

th:first-child, td:first-child {
  position: sticky;
  left: 200px;
}

td:first-child {
  padding-left: 5px;
  z-index: 10;
  background: white
}

th:first-child {
  padding-left: 5px;
  z-index: 30;
}

th {
  position: sticky;
  top: 0;
  background: aqua;
  z-index: 20;
}

footer {
  height: 2000px;
}