1

Estoy intentando montar una tabla para ver una serie de datos y resulta que como tiene demasiadas columnas, esta es más ancha que mi pantalla y se sale, a continuación muestro en pantalla el problema.

introducir la descripción de la imagen aquí

Según he leído, para solucionar esto debo emplear en mi css el atributo overflow-x:scroll. Pero cómo se ve en la imagen, esto lo consigo a rasgos generales, pero no para la tabla, que es donde yo quiero forzar.

Este es mi código html. Los datos los paso por javascript.

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <table class="table table-striped">
                <thead class="thead-dark">
                    <tr id="cols_table"></tr>
                </thead>
                <tbody id=body_table>
                </tbody>
            </table>
        </div>
    </div>
</div>

Y mi css he probado forzando un tamaño (cosa que no quiero)

.table{ height: auto; width: 600px; overflow-x: scroll; }

y también, dejando que se adapte al div, pero ninguna va.

.table{
    height: auto;
    width: 90%;
    overflow-x: scroll;
}

También he probado a forzar que la tabla entre en mi div pero se solapa todo...

.table{
    table-layout: fixed;
    width: 100%;
}

introducir la descripción de la imagen aquí

¿Como hago para que mi tabla no exceda el tamaño de mi pantalla y se ponga la barra de scroll?

2 respuestas 2

0

Parece que estas usando bootstrap, votaría por usar esta manera de hacer que se adapte tu tabla. Con la clase table-responsive.

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="table-responsive">
            <table class="table table-striped">
                <thead class="thead-dark">
                    <tr id="cols_table"></tr>
                </thead>
                <tbody id=body_table>
                </tbody>
            </table>
            </div>
        </div>
    </div>
</div>
0

La naturaleza de una tabla en HTML es de tipo:

  • inline-table 1

Entonces lo que podemos hacer es lo siguiente:

  • Alteramos dicho comportamiento por default indicándole que ahora será un elemento block eso provocará que la tabla abarque toda una fila
  • Designamos un ancho predefinido a este elemento por ejemplo 300px
  • Hasta este punto la tabla seguirá mostrando todos sus elementos, sin embargo aquí es donde hacemos uso de overflow con el valor de auto2
  • Lo anterior debido a que necesitamos ocultar contenido que sobra entonces se dibujará una barra de desplazamiento horizontal

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Demo</title>
      <style>
        body{
          display: flex;
          justify-content: center;
        }
       .tabla-informe {
          display: block;
          overflow: auto;
          width: 300px;
        }
      </style>
    </head>
    <body>
    <div>
      <table class="tabla-informe">
      <tr>
        <th>Uno</th>
        <th>Dos</th>
        <th>Tres</th>
        <th>Cuatro</th>
        <th>Cinco</th>
        <th>Seis</th>
        <th>Siete</th>
        <th>Ocho</th>
        <th>Nueve</th>
        <th>Diez</th>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
      </tr>
    </table>
    </div>
    </body>
    </html>

REFERENCIAS

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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