-1

Tengo una tabla que necesito que se adapte a un contenedor exacto, me explico, tal como lo tengo ahora mismo se genera un scroll horizontal de la página(dependiendo del tamaño de la pantalla) , lo que quiero es que se genere ese scroll solo en la tabla o el contenedor que la contiene, para que no tenga que hacerse el scroll de la página entera. La finalidad es que el sidebar este siempre visible y lo único que se scrollee sea la tabla.

Pd: La tabla la genero a partir de una librería en react, y puede llegar el caso que se le añadan mas campos o menos campos, ya que es dinámica.

https://codepen.io/ralvarado96/pen/bGoZwjB

3
  • El problema es con tu tabla y el sidebar, pues ambos suman en ancho 100% + 230px, respectivamente. Esto hace que siempre tengas contenido fuera del viewport y se cree el scroll horizontal. Una solución rápida sería cambiar el 100% de la tabla por width: calc(100% - 230px); el 17 ene. 2022 a las 2:14
  • Si necesitas una respuesta más completa (aunque supongo se entiende el punto), por favor agrega un ejemplo mínimo verificable. Revisa Cómo preguntar el 17 ene. 2022 a las 2:14
  • Con alguno pequeños cambio se soluciona. el 17 ene. 2022 a las 2:21

1 respuesta 1

0

Lo que yo haría, es ponerle @media queries. Que te va a servir para que cuando tu pantalla sea más pequeña, te ordena las cosas de manera diferente.

A partir de tu código, le agregué algunas cosas, para que veas más o menos mi idea. Cuando se hagan pequeños, en vez de desaparecer los elementos, hacele una función con JS para que las muestre cuando hagas hover sobre cada item. Incluso, podrías cambiar el texto por iconos, y te va a quedar más pro.

Otra opción, para que no se salga la tabla de la pantalla, es cortarla y que el resto no se vea. Eso se hace con una propiedad CSS que es overflow:hidden puesto en el elemento que quieres cortar. Pero no lo recomiendo.

https://codepen.io/guillosgit/pen/oNGVBeo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.