如何让JS动态生成的x*x表格自适应外层div的高度与宽度

方案1：纯CSS实现（最小单元格200px，超出时出现滚动条） #

修改后的CSS代码 #

div {
    max-width: 70vw;
    max-height: 90vh;
    height: fit-content;
    overflow: auto; /* 横竖方向超出容器时自动出现滚动条 */
}
td {
    min-width: 200px;
    min-height: 200px;
    aspect-ratio: 1/1; /* 保持单元格为正方形，宽度适配时高度自动同步 */
    border-radius: 20px;
    background-color: #d5bbee;
    overflow: hidden; /* 防止内容撑爆单元格 */
}
table{
    width: 100%;
    height: 100%;
    table-layout: fixed; /* 强制单元格宽度按列数均匀分配，避免被内容撑变形 */
    border-radius: 20px; 
    border-spacing: 15px;
    border-collapse:separate;
    background-color:rgb(102, 184, 211) ;
    border-color: transparent;
}

改动说明 #

• 外层div新增height: fit-content给table的高度百分比提供参照，搭配overflow: auto实现超出容器最大尺寸时自动出现滚动条
• 表格新增table-layout: fixed保证列宽均匀分配，不会随内容变化错乱
• 单元格去掉固定宽高，改用min-width、min-height限制最小尺寸，新增aspect-ratio: 1/1保证单元格始终为正方形，宽度自适应时高度自动同步

方案2：CSS+JS实现超出自动缩放（无滚动条，单元格自动缩小适配容器） #

如果需要表格始终完全显示在div内，不出现滚动条，仅在尺寸超过div时自动缩小单元格，可配合JS动态计算单元格尺寸：

步骤1：修改CSS，使用CSS变量接收动态值 #

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

步骤2：生成表格时用JS计算单元格尺寸 #

// x为用户输入的行列数
function calcCellSize(x) {
    const gap = 15; // 对应CSS中border-spacing的取值
    // 计算宽度方向最大可用单元格尺寸
    const maxW = (70 * window.innerWidth / 100 - gap * (x + 1)) / x;
    // 计算高度方向最大可用单元格尺寸
    const maxH = (90 * window.innerHeight / 100 - gap * (x + 1)) / x;
    // 取两个方向的最小可用值，且最大不超过200px
    const cellSize = Math.min(200, maxW, maxH);
    // 赋值给CSS变量
    document.querySelector('div').style.setProperty('--cell-size', `${cellSize}px`);
}
// 生成表格前调用calcCellSize(x)即可，窗口大小变化时也可重新调用更新尺寸

效果说明 #

• 当行列数x较小时，单元格保持200px的默认尺寸
• 当x增大到表格即将超出div的最大宽高时，单元格自动等比缩小，保证整个表格完全适配外层div，不会出现滚动条

内容的提问来源于stack exchange，提问作者Relenor