TypeScript二维数组转10×10HTML表格：div实现失效问题求助

嘿，我完全懂你的困扰——用<table>和<td>能轻松搞定10行10列的表格，但换成<div>后就变成了100个垂直堆叠的独立方块，根本没有行列结构。这其实是因为<div>默认是块级元素，每个都会占满父容器的宽度，自动换行到下一行。咱们用CSS的Grid或Flexbox就能完美解决这个问题，下面给你两种实用方案：

方案一：CSS Grid（最推荐，适合明确行列的网格） #

CSS Grid是专门为网格布局设计的，代码简洁且可控性强。你可以直接把100个单元格<div>放在一个容器里，通过Grid属性强制每行显示10个：

TypeScript 代码（生成网格结构） #

const gridSize = 10;
const container = document.getElementById('grid-container')!;

// 生成100个单元格
for (let row = 0; row < gridSize; row++) {
  for (let col = 0; col < gridSize; col++) {
    const cell = document.createElement('div');
    cell.classList.add('grid-cell');
    cell.textContent = `${row}, ${col}`; // 可选：显示坐标
    container.appendChild(cell);
  }
}

CSS 样式（实现网格布局） #

#grid-container {
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 10列，每列宽度均等 */
  gap: 1px; /* 可选：单元格之间的间距 */
  border: 1px solid #333; /* 可选：网格外边框 */
  max-width: fit-content; /* 让容器宽度适配内容 */
}

.grid-cell {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

方案二：Flexbox（兼容旧浏览器的备选方案） #

如果需要兼容不支持Grid的旧浏览器，Flexbox也是个不错的选择，通过flex-wrap: wrap让元素自动换行：

TypeScript 代码（结构和上面一致） #

const gridSize = 10;
const container = document.getElementById('grid-container')!;
container.classList.add('flex-grid');

for (let i = 0; i < gridSize * gridSize; i++) {
  const cell = document.createElement('div');
  cell.classList.add('grid-cell');
  cell.textContent = `${Math.floor(i/10)}, ${i%10}`;
  container.appendChild(cell);
}

CSS 样式 #

.flex-grid {
  display: flex;
  flex-wrap: wrap; /* 超出容器宽度自动换行 */
  width: calc(10 * (42px + 1px)); /* 计算总宽度：10个单元格（宽42px）+ 间距 */
  gap: 1px;
  border: 1px solid #333;
}

.grid-cell {
  width: 40px;
  height: 40px;
  padding: 0;
  box-sizing: border-box; /* 确保边框和内边距不额外增加宽度 */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

为什么原来的<div>不行？ #

默认情况下，<div>的display属性是block，这意味着每个<div>都会单独占据一行，宽度撑满父容器。而Grid和Flexbox通过改变元素的布局模式，强制它们在同一行排列，达到表格的行列效果。

内容的提问来源于stack exchange，提问作者Mohamed-Ali Elakhrass