Question

0

35

Vistas

How 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>

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-03T13:28:29.483Z

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