HTML Table Overflow-y Scrolling With Fixed Y Axis Headings

I have a table with headers for both the x and y axes, and want the table to scroll when it overflows on the y axis while retaining the header. Using display: block; overflow-y: au

Solution 1:

You can use the sticky position for your headers. You need to change your HTML a little bit, you need a wrapper for the table.

<div id='table_wrapper'>
  <table> .... </table>
</div>

Now you can set the TH elements to position: sticky and, for the thead, make it stick at top: 0px, for the tbody use left: 0px.

Using just that won't work on your actual code since you have some errors though. So, first close the thead tag and open a tbody tag properly (now you open the thead and close a tbody). The second thing you need to fix is to remove those display: block on the table elements, when you do that you break the table.

Check this edited codepen link https://codepen.io/anon/pen/daLrGZ?editors=1100

Note that you'll need to add some background to the th's.

EDIT: if you want the top left TH to stay over the rest THs add this:

table thead tr th:first-child {
  left: 0px; //so it also sticks to the left
  z-index: 2; //so it's over the rest
}

Solution 2:

Maybe what you are looking is already solved, have a look and let me know: https://stackoverflow.com/a/50649696/5796090

In the link above you can find a scrollable table with a fixed header using CSS Grid.

Basically you define 2 areas in your grid for thead and tbody and set an overflow for the second one.

table {
  display: inline-grid;
  grid-template-areas: 
  "head-fixed" 
  "body-scrollable";
}

thead {
  grid-area: head-fixed;
}

tbody {
  grid-area: body-scrollable;
  overflow: auto;
  height: 400px; /* define height depending on your needs */
}

Hope this help :)