求助：如何实现指定单元格数量且按视口宽度自动换行的动态HTML表格

我来帮你搞定这个自适应表格的问题！你的核心需求是让单元格根据视口宽度自动换行，每行完全占满视口宽度对吧？先看看你现有代码里的几个小问题：

• 循环里每次都执行table.append(row)，这会导致同一个<tr>被重复添加到表格，最后DOM结构混乱，也看不到多行效果
• 没有判断当前行的宽度是否达到视口限制，所以无法触发自动换行逻辑

下面是完整的可运行解决方案，分HTML、CSS、JavaScript三部分：

1. HTML结构 #

先准备好表格的容器，确保它能占满视口宽度：

<div id="tableContainer">
  <table id="myTable"></table>
</div>

2. CSS样式 #

给单元格和表格设置基础样式，这里我做了两种方案的样式，你可以按需选择：

方案A：固定单元格宽度+间距 #

适合需要统一单元格大小的场景：

.redCube {
  width: 80px;
  height: 80px;
  background-color: red;
  border: none;
  box-sizing: border-box;
}

#myTable {
  border-collapse: separate;
  border-spacing: 4px; /* 用表格间距代替单元格margin，布局更稳定 */
  width: 100%;
}

#tableContainer {
  width: 100vw;
  padding: 10px;
  box-sizing: border-box;
}

方案B：自适应平分宽度 #

适合希望单元格自动占满每行宽度的场景：

.redCube {
  height: 80px;
  background-color: red;
  border: none;
  box-sizing: border-box;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
}

#tableContainer {
  width: 100vw;
  padding: 10px;
  box-sizing: border-box;
}

3. JavaScript逻辑 #

核心是计算每行能容纳的单元格数量，然后批量创建行和单元格，同时支持窗口大小变化时重新布局：

// 核心创建表格函数
function createTable(numOfCubes) {
  const table = document.getElementById("myTable");
  table.innerHTML = ""; // 先清空表格，避免重复创建
  
  // 计算每行可容纳的单元格数量（根据你选的方案调整）
  let cellsPerRow;
  // --- 方案A：固定宽度计算 ---
  const cellWidth = 80 + 8; // 单元格宽度80px + 左右各4px的border-spacing
  const viewportWidth = window.innerWidth - 20; // 减去容器的左右padding
  cellsPerRow = Math.floor(viewportWidth / cellWidth);
  
  // --- 方案B：自适应平分宽度（替换上面的代码）---
  // const minCellWidth = 100; // 设置单元格最小宽度，避免太窄
  // const viewportWidth = window.innerWidth - 20;
  // cellsPerRow = Math.max(1, Math.floor(viewportWidth / minCellWidth));

  let currentRow = document.createElement("tr");
  
  for (let i = 0; i < numOfCubes; i++) {
    const redCube = document.createElement("td");
    redCube.className = "redCube";
    redCube.setAttribute("onclick", "showPosition(this)");
    
    // 方案B需要添加这一行，设置单元格宽度
    // redCube.style.width = `${100 / cellsPerRow}%`;
    
    currentRow.appendChild(redCube);
    
    // 当当前行单元格数达到上限，或是最后一个单元格时，添加行到表格并新建行
    if ((i + 1) % cellsPerRow === 0 || i === numOfCubes - 1) {
      table.appendChild(currentRow);
      currentRow = document.createElement("tr");
    }
  }
}

// 监听窗口大小变化，自动重新布局表格
window.addEventListener("resize", () => {
  // 获取当前已有的单元格数量，保持总数不变
  const totalCubes = document.querySelectorAll(".redCube").length;
  createTable(totalCubes);
});

// 初始化表格（示例：创建20个单元格）
createTable(20);

// 实现你需要的showPosition函数
function showPosition(cell) {
  const rowIndex = cell.parentElement.rowIndex;
  const cellIndex = cell.cellIndex;
  alert(`位置：第${rowIndex + 1}行，第${cellIndex + 1}列`);
}

关键逻辑说明 #

1. 动态计算每行容量：根据视口宽度和单元格实际占用宽度，算出每行能放多少个单元格
2. 行切换判断：每创建满一行的单元格，就把当前行添加到表格，然后新建一行继续填充
3. 响应式适配：监听窗口resize事件，确保窗口大小变化时表格能自动重新布局
4. 避免重复创建：每次调用createTable时先清空表格，防止重复添加元素

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