when I scroll/ select the row and use the up/down arrow to scroll the row goes as shown in image but when I use the mouse every thing fine work

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;
} 

code:-

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