Una tabla generada por Javascript crea celdas no cuadradas.

Resumen del Problema

Se está intentando construir una tabla dinámicamente en JavaScript, donde el tamaño de la tabla depende de la anchura actual de la ventana del navegador. Aunque la anchura de las celdas se alinea correctamente con la anchura del contenedor, la altura de la última fila de celdas pareciera sobresalir del contenedor. Esta discrepancia no se explica, ya que matemáticamente la altura calculada debería coincidir con la altura del contenedor.

Análisis del Código

1. Establecimiento de Dimensiones:

   • El contenedor tableDiv y las celdas de la tabla se dimensionan en relación a pageWidth, que es la anchura del desplazamiento del documento.
   • Las dimensiones son calculadas como el 70% de pageWidth para ambos, tanto para el ancho como para la altura del tableDiv.

2. Creación de la Tabla:

   • La tabla se construye con 10 filas y 10 columnas.
   • Cada celda tiene un ancho y una altura calculada como el 7% de pageWidth dividido por el número de columnas y filas, respectivamente.
3. Visualización de la Tabla:
   • Las celdas se añaden al contenedor y se establece un color de fondo para distinguirlas.

Problema Potencial

El problema puede surgir por varias razones:

1. Modelado de Box:

   • El modelo de caja (box model) en CSS incluye bordes, márgenes y acolchados (padding). Si la tabla o sus celdas tienen algún borde o margen, esto puede causar que la altura total ocupada por las celdas exceda la altura del contenedor.
2. Rounding Issues:
   • Los cálculos de las dimensiones podrían estar causando problemas de redondeo. Por ejemplo, si la altura total de las celdas se calcula como un número decimal que se redondea hacia abajo, esto podría resultar en una altura visualmente mayor a la que se espera.

Soluciones Propuestas

1. Revisar el Modelo de Caja:

   • Asegurarse de que no haya márgenes, bordes o acolchados que afecten las dimensiones de las celdas. Se puede resolver definiendo el box-sizing como border-box en CSS:

     * {
      box-sizing: border-box;
     }

2. Calcular y Ajustar la Altura Total:

   • Verificar el cálculo de la altura de las celdas para que se ajuste perfectamente dentro del contenedor. Si es necesario, añade un colapso o ajuste explícito en la altura de la última fila con un ajuste en el código:

     const totalHeight = tableDiv.offsetHeight;
     const adjustedHeight = totalHeight / nRows;

3. Uso de Consola para Depuración:
   • Continuar usando console.warn para observar las dimensiones de tableDiv y las celdas, verificando que estén alineadas correctamente.

Implementando estas soluciones se debería resolver el problema de las celdas no cuadradas en la tabla generada dinámicamente.