如何用HTML和CSS创建可动态调整大小的方形填字游戏表格

下面的CSS可以实现你要的效果，让方形填字游戏表格自适应最大可用空间，同时保持单元格大小一致，两侧保留内边距：

/* 重置父容器默认样式，确保布局不受干扰 */
body {
  margin: 0;
  padding: 0 1rem; /* 左右保留1rem的内边距，可根据需求调整数值 */
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 填字游戏表格核心样式 */
.table {
  width: 100%;
  max-width: 100vh; /* 限制表格最大宽度为视口高度，确保始终是方形 */
  aspect-ratio: 1 / 1; /* 强制表格保持宽高1:1的方形比例 */
  border-collapse: collapse; /* 合并单元格边框，消除间隙 */
}

.table td {
  width: 1%; /* 让所有单元格均等分配表格宽度 */
  height: 1%; /* 让所有单元格均等分配表格高度 */
  border: 1px solid #000; /* 单元格边框，方便区分网格 */
  text-align: center;
  vertical-align: middle;
  padding: 0; /* 清除默认内边距，避免单元格大小不一致 */
  box-sizing: border-box;
}

/* 可选：如果td内放置输入框，添加以下样式让输入框填满单元格 */
.table td input {
  width: 100%;
  height: 100%;
  border: none;
  text-align: center;
  font-size: 1.2rem;
  outline: none;
}

关键样式说明 #

• aspect-ratio: 1 / 1：强制表格保持严格的方形，这是填字游戏布局的核心属性，确保宽高始终相等。
• max-width: 100vh：避免在宽屏设备上表格过宽，限制最大宽度为视口高度，保证单元格不会过大影响操作体验。
• width: 1% 和 height: 1%：让所有单元格自动均分表格的可用空间，确保每个单元格大小完全一致。
• 父容器的Flex布局：让表格在视口中垂直水平居中，同时通过padding给左右两侧预留合适的空白。
• border-collapse: collapse：合并单元格边框，消除默认的间隙，让填字网格更规整。

另外，你的Jinja2代码里的{{ . }}是笔误，建议替换为实际的内容变量，比如{{ grid[row][column] }}（假设你用二维数组存储填字数据）。

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