Tablas responsive

Las tablas son un problema para el diseño responsive. Cuando son tablas con una cierta anchura al pasar a responsive suelen necesitar de un sroll horizontal. Es decir no se adaptan al ancho de la pantalla si el ancho de las columnas no es suficienta para mostrar los datos que contienen las celdas.

Esto es solucionable on CSS por supuesto y un pcoco de Javascript: se trata de trasponer filas y columnas para pantallas estrechas, de esta manera las columnas se mostrarán como líneas y se adaptan al ancho de pantalla.

Puedes probarlo y esperimentar con este ejemplo en el editor o puedes ver el resultado en vivo

El código HTML

En el código HTML se debe colocar la tabla dentro de un bloque div con un id usado por Javascript para identificar la tabla que debe ajustar. Antes y después de la tabla se colocan dos bloques div para los botones de desplazamiento por las filas de la tabla en el modo responsie. Los ids de esos botone serán botUP y botDn

  <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>
  <th>Campo 6</th>
  <th>Campo 7</th>
  <th>Campo 8</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>
  <td>Campo con los datos de mostrar 6</td>
  <td>Campo con los datos de mostrar 7</td>
  <td>Campo con los datos de mostrar 8</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>
  <td>Campo con los datos 6 en fila 2</td>
  <td>Campo con los datos 7 en fila 2</td>
  <td>Campo con los datos 8 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>
  <td>Campo con los datos 6 en fila 3</td>
  <td>Campo con los datos 7 en fila 3</td>
  <td>Campo con los datos 8 en fila 3</td>
  </tr>
  </tbody>
  </table>
  <div class="botDn"></div>
  </div>

Estilos CSS

En los estilos se usa un media query para cambiar la forma de la tabla en pantallas por debajo de 1024, para otras dimensiones basta con cambiar este valor o usar otros query ajustando las reglas de estilos que sean necesaria.

.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: 1024px){
.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;
} }

El Javascript

El código Javascript ajusta el alto del bloque que contiene a la tabla para crear una ventana donde se muestra una fila cadz vez (en forma vertical). Coloca los eventos para los botones de avanzar o retroceder por las filas.