1

Buenos días compañeros de stack overflow necesito ayuda con una tabla que tiene muchos campos, por lo que requiero que tenga un scroll vertical y horizontal, además de esto necesito que la cabecera quede fija al momento de hacer scroll vertical. gracias de antemano por su ayuda.

Como pueden ver aquí dejo un ejemplo aproximado de lo que necesito, lo único que realice fue una tabla con varios campos diligenciados y los dos scroll, sin embargo solo está funcionando el scroll vertical, pero el scroll horizontal no funciona, solo se ve, es de anotar que en este ejemplo solo coloque aproximadamente la mitad de las columnas que realmente voy a tener en mi tabla

table.scroll {
    width: 20%; /* 140px * 5 column + 16px scrollbar width */
    border-spacing: 0;
    border: 2px solid black;
}

table.scroll tbody,
table.scroll thead tr { display: block; }

table.scroll tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: scroll;
}

table.scroll tbody td,
table.scroll thead th {
    width: 140px;
    border: 1px solid black;
}

table.scroll thead th:last-child {
    width: 156px; /* 140px + 16px scrollbar width */
}

thead tr th { 
    height: 30px;
    line-height: 30px;
    /*text-align: left;*/
}

tbody { border-top: 2px solid black; }

tbody td:last-child, thead th:last-child {
    border-right: none !important;
}
<table class="scroll">
  <thead>
    <tr>
      <th>Campo titulo 1</th>
      <th>Campo titulo 2</th>
      <th>Campo titulo 3</th>
      <th>Campo titulo 4</th>
      <th>Campo titulo 5</th>
      <th>Campo titulo 6</th>
      <th>Campo titulo 7</th>
      <th>Campo titulo 8</th>
      <th>Campo titulo 9</th>
      <th>Campo titulo 10</th>
      <th>Campo titulo 11</th>
      <th>Campo titulo 12</th>
      <th>Campo titulo 13</th>
      <th>Campo titulo 14</th>
      <th>Campo titulo 15</th>
      <th>Campo titulo 16</th>
      <th>Campo titulo 17</th>
      <th>Campo titulo 18</th>
      <th>Campo titulo 19</th>
      <th>Campo titulo 20</th>
    </tr>
  </thead>
  <tbod>
    <tr>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Textp del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
    </tr>
      <tr>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Textp del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
    </tr>
    <tr>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Textp del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
      <td>Texto del campo</td>
    </tr>
  </tbod>
</table>

1 respuesta 1

3

La solución más sencilla, utilizando sólo CSS y no JS, sería recurrir a la propiedad position: sticky;. La parte mala es que hay algunas limitaciones de uso en ciertos navegadores, aunque en la gran mayoría de los modernos debería funcionar.

.table-wrapper {
  width: 100%;
  height: 200px; /* Altura de ejemplo */
  overflow: auto;
}

.table-wrapper table {
  border-collapse: separate;
  border-spacing: 0;
}

.table-wrapper table thead {
  position: -webkit-sticky; /* Safari... */
  position: sticky;
  top: 0;
  left: 0;
}

.table-wrapper table thead th,
.table-wrapper table tbody td {
  border: 1px solid #000;
  background-color: #FFF;
}
<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>Campo titulo 1</th>
        <th>Campo titulo 2</th>
        <th>Campo titulo 3</th>
        <th>Campo titulo 4</th>
        <th>Campo titulo 5</th>
        <th>Campo titulo 6</th>
        <th>Campo titulo 7</th>
        <th>Campo titulo 8</th>
        <th>Campo titulo 9</th>
        <th>Campo titulo 10</th>
        <th>Campo titulo 11</th>
        <th>Campo titulo 12</th>
        <th>Campo titulo 13</th>
        <th>Campo titulo 14</th>
        <th>Campo titulo 15</th>
        <th>Campo titulo 16</th>
        <th>Campo titulo 17</th>
        <th>Campo titulo 18</th>
        <th>Campo titulo 19</th>
        <th>Campo titulo 20</th>
      </tr>
    </thead>
    <tbod>
      <tr>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Textp del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
      </tr>
        <tr>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Textp del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
      </tr>
      <tr>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Textp del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
        <td>Texto del campo</td>
      </tr>
    </tbod>
  </table>
</div>

1
  • 1
    Buenos días amigo, muchas gracias, la verdad, funciona perfectamente.
    – Brayan
    Commented el 28 ago. 2019 a las 13:33

Tu Respuesta

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

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