How can I make a sticky table header?-CodePudding

I have a table and I would like to make the header sticky.

I am using the following code:

.table-2 thead th {
  position: sticky !important;
  position: -webkit-sticky !important;
  top: 0 !important; 
}
.table-2 {
    position: relative !important;
      overflow-x: visible !important;
}

On this page: https://tfc.eu.com/smalley-spirolox-retaining-rings/spirolox-retaining-rings-selection-guide/

But it's not working.

What is wrong?

CodePudding user response：

From what I understand:

The issue boils down to the fact that stickiness requires position: relative to work and that doesn’t apply to and in the CSS 2.1 spec.

(Source: https://css-tricks.com/position-sticky-and-table-headers/)

CodePudding user response：

First try to give table tag position relative in the last set position sticky to th:

.table-2 {
   position: relative;
   overflow-x: visible;
}
.table-2 th {
   position: sticky !important;
}

you only have th in each table so no need thead