Estoy tratando de escalar una tabla generada por js a la altura y el ancho de un div. Probé algunas soluciones en línea, pero ninguna funcionó para mí. (la tabla es x * x depende de la entrada del usuario)

hasta ahora solo he logrado escalar la tabla en ancho pero no en altura.

Esto es lo que hice:

 div { max-width: 70vw; max-height: 90vh; overflow-x: auto; } td { width: 200px; height: 200px; border-radius: 20px; background-color: #d5bbee; } table{ width: 100%; height: 100%; border-radius: 20px; border-spacing: 15px; border-collapse:separate; background-color:rgb(102, 184, 211) ; border-color: transparent; }

 <div> <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> </div>

el ancho de cada celda se escala de alguna manera para ajustarse al ancho de la tabla, pero la altura de cada celda sigue siendo de 200 px, por lo que actúa de manera diferente. He intentado table-layout:fixed y overflow:hidden pero nada tiene el mismo efecto en la altura. Quiero que la tabla se escale solo si va a ser más grande que el div.

Gracias por cualquier ayuda :]