Tabla responsive
Solución
<body>
<div class="contTabla" id="dTabla">
<div class="botUp"></div>
<table class="tabla">
<thead class="head">
<th>Campo 1</th>
<th>Campo 2</th>
<th>Campo 3</th>
<th>Campo 4</th>
<th>Campo 5</th>
</thead>
<tbody class="body">
<tr>
<td>Campo con los datos de mostrar 1</td>
<td>Campo con los datos de mostrar 2</td>
<td>Campo con los datos de mostrar 3</td>
<td>Campo con los datos de mostrar 4</td>
<td>Campo con los datos de mostrar 5</td>
</tr>
<tr>
<td>Campo con los datos 1 en fila 2</td>
<td>Campo con los datos 2 en fila 2</td>
<td>Campo con los datos 3 en fila 2</td>
<td>Campo con los datos 4 en fila 2</td>
<td>Campo con los datos 5 en fila 2</td>
</tr>
<tr>
<td>Campo con los datos 1 en fila 3</td>
<td>Campo con los datos 2 en fila 3</td>
<td>Campo con los datos 3 en fila 3</td>
<td>Campo con los datos 4 en fila 3</td>
<td>Campo con los datos 5 en fila 3</td>
</tr>
</tbody>
</table>
<div class="botDn"></div>
</div>
</body>
<style>
.tabla :is(.body td, .head th){
padding: 8px 4px;
}
.tabla thead th{
background: lightgrey;
color:white;
}
.tabla tbody td{
background: #d3d3d373;
color:#474444;
}
.contTabla .navTabla{
display: none
}
@media (max-width: 1150px){
.contTabla .botUp, .contTabla .botDn{
display: block;
height: 0;
width: 0;
margin: 0 auto;
border: 20px solid transparent;
border-top: 0;
border-bottom: 0;
pointer-events:all;
}
.contTabla .botUp{
border-bottom: 20px solid black;
}
.contTabla .botDn{
border-top: 20px solid black;
}
.contTabla .tabla{
display: flex;
gap: 2px;
justify-content: space-between;
overflow:hidden;
background:#f9f2fc;
}
.contTabla .tabla .head{
display: block;
flex: 1 0;
height: fit-content;
}
.contTabla .tabla .body{
flex: 2 0 auto;
overflow-y: hidden;
scroll-snap-type: y mandatory;
}
.contTabla .tabla .head tr{
display: flex;
flex-direction: column;
row-gap: 2px;
flex: 1 0 100%;
}
.contTabla .tabla .body tr{
display: flex;
flex-direction: column;
row-gap: 2px;
flex: 1 0 100%;
scroll-snap-align: start;
}
.contTabla .tabla .body tr:nth-child(odd){
background:#f4fff5
}
.contTabla .tabla :is(th, td){
display: block;
} }
</style>
<script>
(function(){
/*Coloca el alto de la tabla al del head para anchos menores a la tabla*/
/*Se trata de trasponer files y columnas, dejando fija la cabecera, a modo de sidebar */
function setTabla(idTabla){
let sel = "#"+idTabla;
let tabla = document.querySelector(sel+" table");
//Si no tiene formato de tabla, poner alto de tabla al alto de head
if( window.getComputedStyle(tabla).display !="table"){
let hd = document.querySelector(sel+" thead");
let alto = window.getComputedStyle(hd).height;
let body = document.querySelector(sel + " tbody");
tabla.style.height = alto;
let bot = document.querySelector(sel+" .botUp");
bot.addEventListener("click", ()=>window.tBody.scrollBy({left:0, top:-1, behavior:'smooth'}));
bot = document.querySelector(sel+" .botDn");
bot.addEventListener("click",()=>window.tBody.scrollBy({left:0, top:1, behavior:'smooth'}));
body.scrollTo(0,0);
body.cdr = 0;
window.tBody = body;
}
}
window.onload =function(){setTabla('dTabla');};
})()
</script>
Explicación
Este es el código html de la página de prueba. Se trata de una tabla con 8 columnas, cada una con su cabecera. Contiene tres filas de datos.
Mientras la pantalla sea ancha es totalmente visible, si la pantalla se estrecha debemos modificarla para que siga siendo visible. Esto se consigue con CSS
Las reglas usan un media query para que se modifique el aspecto de la tabla en tamaños inferiores a 1154px. (Este valor es para que se vea en la ventana de probar código). Puedes usar otros.
A partir de este tamaño la tabla deja de tener display = table y pasa a combinar blocks y flex. Las filas de la tabla pasan a mostrarse como flex tipo columnas. Mintras que la tabla se convierte en un flex modo filas.
Asi tendremos un bloque izquierdo con las cabeceras de las columnas y un bloque a la derecha con las filas. Como la tabla solo va a tener el alto para contener las cabeceras de columna, este bloque tendrá un overflow que se controla con javascript.
Arriba y abajo de la tabla aparecen dos botones que desplazan el lado de las filas, es decir, el bloque derecho. Con scroll-snap el navegador coloca el cuadro completo en la ventana y no deja filas a medias. Cada fila de datos queda alineada en horizontal con su cabecera de columna.
Por último la función autoinvocable usa setTabla() para ajustar el alto de la tabla al de la sección head, recortando así el cuerpo para que solo se muestre una fila cada vez.
Un evento click en las flechas encima y debajo de la tabla hacen que los bloques de datos se desplacen en vertical.
El script lo pudes poner en head o al final de la sección body, como mejor te parezca.