Position Sticky does not work on <thead>

By design Issue #16765952


Steven S.
Apr 5, 2018
This issue is public.
Found in
  • Microsoft Edge
  • Chrome
Found in build #
Reported by 4 people

Sign in to watch or report this issue.

Steps to reproduce

The css position: sticky works for <th> elements but not <thead> elements.
The same bug was found in Chrome: see crbug 702927

Code to reproduce:

div {
  height: 200px;
  width: 200px;
  overflow: auto;

table {
  width: 100%;
  border-collapse: collapse;

thead {
  position: sticky;
  top: 0;
  background: #EEE;

see fiddle

The workaround is to change thead to th in your css.


0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Steven K.”

    • I should also mention it doesn’t work on ``, basically identical to the Chrome bug.

    • Microsoft Edge Team

      Changed Assigned To to “Bogdan B.”

      Changed Status to “By design”

    • Known issue. This cannot be fixed because THEAD and TBODY do not generate boxes and therefore cannot be transform(ed). I’m resolving By Design because disabling sticky on them is intentional. We will consider fixing this whenever we rework our table implementation, but this is not going to happen in the near or intermediate future.

    You need to sign in to your Microsoft account to add a comment.

    Sign in