如何实现表格每3个<td>标签后自动创建<tr>标签

两种实现路径都能满足需求，你可以根据场景选择：

纯CSS方案（无DOM改动） #

不需要修改任何HTML结构，通过重置表格元素的display属性，用弹性布局实现自动换行，渲染效果和原生表格每行3个单元格完全一致：

table {
  width: 100%;
  border-collapse: collapse; /* 需要合并单元格边框时可添加该属性 */
}
/* 命中浏览器自动生成的、包裹所有td的tr节点 */
table tr {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
table td {
  box-sizing: border-box;
  width: calc(100% / 3);
  /* 可按需自定义单元格样式，比如边框、内边距：
  border: 1px solid #e5e5e5;
  padding: 10px;
  */
}

注意：该方案仅改变渲染表现，不会实际在DOM中插入新的<tr>标签。如果业务逻辑需要读取标准的表格DOM结构，请使用下面的JS方案。

JavaScript方案（生成标准表格DOM） #

脚本会自动重组节点，最终生成的DOM结构和手动插入<tr>标签完全一致，所有原生表格特性都能正常使用：

// 替换为你的目标表格对应选择器
const targetTable = document.querySelector('table');
// 取出所有单元格节点
const cellList = Array.from(targetTable.querySelectorAll('td'));
// 清空表格原有内容
targetTable.innerHTML = '';

// 每3个单元格为一组，包裹进新的tr节点
for (let i = 0; i < cellList.length; i += 3) {
  const row = document.createElement('tr');
  cellList.slice(i, i + 3).forEach(cell => row.appendChild(cell));
  targetTable.appendChild(row);
}

建议把这段代码放在DOMContentLoaded事件回调中执行，等页面DOM加载完成后自动完成结构调整即可。

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