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>