Usar Calc() con tablas: superar el dilema de los porcentajes

Crear tablas con columnas de ancho fijo y variable puede ser un desafío, especialmente cuando intentar usar la función calc() dentro de ellos.

En HTML, establecer anchos de columna fijos es sencillo usando px o em. Sin embargo, para columnas de ancho variable, se suele utilizar la unidad de porcentaje (%). Sin embargo, cuando se emplea calc() dentro de las tablas, los porcentajes parecen ineficaces.

Para superar esta limitación, el atributo table-layout se puede aplicar a la tabla. Este atributo impone anchos fijos para elementos td secundarios, lo que permite que los porcentajes de CSS funcionen según lo previsto.

HTML: