如何固定表 header？

Question

當我滾動/ select 行並使用向上/向下箭頭滾動行時如圖所示但是當我使用鼠標時一切正常

CSS:-

#header-fixed {
    font-family: AvenirLTProBook;
    font-weight: normal;
    background: #1b212a;
    position: sticky;
    top: 0; 
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    font-size: 1px;
} 

代碼：-

  <thead >
            <tr id="header-fixed">
                {headers.map(({ name, field }) => (
                    <th style={{borderRight: "1px solid rgb(105, 105, 105)"}}
                        key={name}                      
                    >
                        {name}
                    </th>
                ))}
            </tr>
        </thead>

Answer 1

試試這個：將 CSS 應用於thead而不是tr

            <thead id="header-fixed">
            <tr>
                {headers.map(({ name, field }) => (
                    <th style={{borderRight: "1px solid rgb(105, 105, 105)"}}
                        key={name}                      
                    >
                        {name}
                    </th>
                ))}
            </tr>
            </thead>

CSS

#header-fixed{
  background-color: "any colour";
  position: sticky;
  top: 0;
}