0
182
ViewsHow to fixed the table header?
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>
·
Juan Pablo Isaza
1 answers
Answer question0
Try this: Apply CSS to thead instead of 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;
}
·
Juan Pablo Isaza
Report
Answer question