position sticky not working react code example

Example 1: React sticky header

// One way around it

// First off get react-sticky (npm/yarn etc..)
npm install react-sticky

// Then you could do something like...
import React from 'react';
import { StickyContainer, Sticky } from 'react-sticky';
// ...
 
class App extends React.Component {
  render() {
    return (
      <StickyContainer>
        {/* Other elements can be in between `StickyContainer` and `Sticky`,
        but certain styles can break the positioning logic used. */}
        <Sticky>
          {({
            style,
 
            // the following are also available but unused in this example
            isSticky,
            wasSticky,
            distanceFromTop,
            distanceFromBottom,
            calculatedHeight
          }) => (
            <header style={style}>
              {/* ... */}
            </header>
          )}
        </Sticky>
        {/* ... */}
      </StickyContainer>
    );
  },
};

Example 2: sticky header not working chrome

thead tr:nth-child(1) th{
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
  }