Make sticky header for the "Browser Compatibility Table"

[Konrud]

Proposal to make header of the "Browser Compatibility Table" sticky. That is, every time the user scrolls down, header sticks to the top, that way it always appears at the top and you don't need to remember or worst yet scroll to the top to see which column corresponds to which browser. Just look at the "Browser Compatibility Table" on the list-style-type page, it's quite long.

It can be done with the progressive enhancement in mind, that is browsers that don't support it will still get the old design.
I would be happy to do this myself but it seems I can't find the right repository for it.

CSS, rough, code for the sticky header

@supports (position: sticky) or (position: -webkit-sticky) {
    thead tr.bc-browsers > th {
       position: -webkit-sticky
       position: sticky;
       top: 0;
       z-index: 1;
       background: rgba(212, 221, 228, .97);
   }

 /**
 *  1. That removes name of each browser for the sighted users, 
 *     but not for the screen readers
 */
  thead tr.bc-browsers > th > SPAN {
     color: transparent; /*[1]*/
  }
}

The result should be something like that:

P.S.
I'm not sure if this is the right repository for this issue but couldn't find any other suitable repository for this.

[Elchi3]

Thanks for your report. Moved over to mdn/kuma which holds the front-end for MDN.

[tobinmori]

@atopal, can you prioritize this feature request?

[atopal]

done

[WebMechanic]

I totally support this request!

This is one of these large tables that would highly benefit from this change:

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Browser_compatibility