Cabeza pegajosa para la mesa de react pero los elementos aparecen debajo?

Estoy usando el componente de mesa de react para mi aplicación de react. Sin embargo, al tratar de hacer pegajosa la cabecera, los elementos de la tabla todavía aparecen en una brecha por encima de la cabecera (imagen siguiente, el Thu 12/17 debe ser sólo parte de los datos de la tabla). Ya he puesto la pantalla de cabecera de mesa a pegajosa y la parte superior a 0 pero esto todavía aparece.

sin desplazamientoCon desplazamientoAquí está la parte de react que hace la tabla

return ( 
    

    
        {headerGroups.map(headerGroup => (
           
            {headerGroup.headers.map(column => (
               
            ))}
           
          
        ))}
     {upcomingDates.map((upcomingDate, index)=> 
      {upcomingDate.slice(0,-5)}
     {rows.filter(function(row){return (row.original.date=== upcomingDate.slice(4, upcomingDate.length));})
     .map((row) => { 
          prepareRow(row)
          return (
            
              {row.cells.map(cell => {
                return 
              })}
            
          )
        })}
   
       

     )
     } 
    
{column.render('Header')}
                
                
                    {column.isSorted
                      ? column.isSortedDesc
                        ? ' 🔽'
                        : ' 🔼'
                      : ''}
                  
                  
{column.canFilter ? column.render(column.filter) : null}
              

      
 
               {cell.value==="Register for VIP" && {cell.render('Cell')}  } 
                {cell.value !== "Register for VIP" && 
 {cell.render('Cell')}
} 
    
 

El css

.tableContainer{
  /* box-shadow: 8px 8px 12px -3px grey; */
  filter: drop-shadow(10px, 10px, 10px, #F5F5F5);
  border-radius:8px;
  max-height:75vh;
  text-align:center;
  display:block;
  padding:15px;
  overflow: auto;
  background:white;
}

table {
  table-layout: fixed;
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
  background-color: #f2f2f2;

}

/* div.tableBody { 
  overflow-y: scroll;
    overflow-x: hidden;
} */
table tbody{
  background-color: #f2f2f2;
}

table td { 
  padding: 4px; 
  margin-top: 50px;
}
table th {
  padding: 4px;
  margin-top: 30px;
}
table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #C1F3F7;
  color: black;
  max-width: 100px;
  position: sticky;
  top: 0;
}


.dateDivider{
  font-weight:1000;
  text-align:left;
  width: 100%;
    font-size: 3vw;
    white-space: nowrap;
  /* padding-left: 5%; */
  
}

Realmente intenté todo, como añadir padding a la parte superior de los elementos de mesa, pero nada parece funcionar. ¡Realmente apreciaría cualquier sugerencia!

Pregunta hecha hace 3 años, 4 meses, 27 días - Por codecraftsman32c9

2 Respuestas:

• El problema que estás experimentando parece estar relacionado con la estructura HTML de tu tabla. Para que la cabecera de la tabla se mantenga pegajosa mientras haces scroll en el cuerpo de la tabla, necesitas asegurarte de que los elementos estén organizados de la manera correcta.

  Aquí tienes algunas sugerencias para mejorar la estructura de tu tabla y hacer que la cabecera se mantenga pegajosa:

  • Mueve el elemento `` dentro del elemento `` y coloca allí las filas de encabezado (``) con las celdas de encabezado (`` dentro del elemento `

    `). Mueve el elemento `

    ` y coloca allí las filas de datos (``) con las celdas de datos (`` y no directamente dentro del `

    `). Asegúrate de que las filas de datos y las celdas de datos estén ubicadas dentro del elemento `

    `.
    • Ajusta tus estilos CSS para adaptarse a esta nueva estructura.

    Aquí te muestro cómo podrías reorganizar tu código para que tenga una estructura correcta:

    jsx
    return ( 
        
    
        

    {headerGroups.map(headerGroup => ( {headerGroup.headers.map(column => ( ))} )} {upcomingDates.map((upcomingDate, index)=> {rows.filter(function(row){return (row.original.date=== upcomingDate.slice(4, upcomingDate.length));}) .map((row) => { prepareRow(row) return ( {row.cells.map(cell => { return })} ) })} )}

    {column.render('Header')} {/ Botón y otros elementos de la cabecera aquí /}
    {/ Colspan debería ser el número total de columnas /} {upcomingDate.slice(0,-5)}
    {cell.value==="Register for VIP" && f2f2f2"}}classname="blurredText" onclick="{handleShow3}" style='{{fontSize:"2vw",'>{cell.render('Cell')} } {cell.value !== "Register for VIP" && {cell.render('Cell')} }

  Asegúrate de ajustar los estilos CSS según la nueva estructura de la tabla. Con estos cambios, deberías poder lograr que la cabecera de la tabla se mantenga pegajosa mientras haces scroll en el cuerpo de la tabla sin que aparezcan elementos por encima de la cabecera.

  Respondida el Dec 19, 2020 a las 08:17 - por Gpt