如何拆分超长<tr>列表为多块（每块最多3行）且每块保留表头

完全可以实现需要的拆分效果，适配200行以上的动态SQL查询数据，支持拆分后的每个块独立保留原表头，单块最多放置3行数据，通过简单配置即可调整块的排列列数为2/3/4列，全程无滚动展示。

采用原生JS动态DOM切片 + CSS栅格布局方案，不需要改动后端SQL查询逻辑，前端拿到返回的表格数据后自动完成拆分：

• 自动提取原表格的表头结构，拆分后的每个数据块都会复用这套表头，保证格式统一
• 按固定行数（默认3行）对全量数据行做切片，每一片生成一个独立的带表头的小表格块
• 通过CSS栅格控制块的排列方向，支持快速调整2/3/4列的布局模式
• 内置内容变化监听机制，SQL查询结果更新时自动重新执行拆分，不需要手动触发

核心拆分逻辑 #

// 可自由调整的配置项
const SPLIT_CONFIG = {
  sourceContainerId: 'FIller1',  // 原始表格的容器ID
  maxRowPerBlock: 3,             // 每个块允许的最大数据行数
  blockLayoutColumn: 3           // 块的排列列数，可改为2/4适配不同需求
}

// 表格拆分核心函数
function renderSplitBlocks() {
  const sourceRoot = document.getElementById(SPLIT_CONFIG.sourceContainerId)
  // 提取原始表头，供所有拆分块复用
  const headerTemplate = sourceRoot.querySelector('thead').outerHTML
  // 提取全量数据行
  const totalDataRows = [...sourceRoot.querySelectorAll('tbody tr')]
  
  // 重置容器为栅格布局
  sourceRoot.innerHTML = ''
  sourceRoot.style.display = 'grid'
  sourceRoot.style.gap = '12px'
  sourceRoot.style.gridTemplateColumns = `repeat(${SPLIT_CONFIG.blockLayoutColumn}, minmax(0, 1fr))`

  // 按每块最大行数切片生成独立块
  for (let startIndex = 0; startIndex < totalDataRows.length; startIndex += SPLIT_CONFIG.maxRowPerBlock) {
    const currentRows = totalDataRows.slice(startIndex, startIndex + SPLIT_CONFIG.maxRowPerBlock)
    // 创建独立的块表格
    const blockTable = document.createElement('table')
    blockTable.className = sourceRoot.className
    blockTable.innerHTML = headerTemplate
    // 追加当前切片的数据行
    const blockTbody = document.createElement('tbody')
    currentRows.forEach(row => blockTbody.appendChild(row))
    blockTable.appendChild(blockTbody)
    sourceRoot.appendChild(blockTable)
  }
}

// 监听容器内容变化，适配动态SQL数据更新场景
const contentWatcher = new MutationObserver(() => {
  // 避免拆分操作触发的二次观察循环
  contentWatcher.disconnect()
  renderSplitBlocks()
  // 重新开启观察，等待下一次数据更新
  contentWatcher.observe(document.getElementById(SPLIT_CONFIG.sourceContainerId), {
    childList: true,
    subtree: true
  })
})

// 页面初始化时开启监听并执行一次拆分
contentWatcher.observe(document.getElementById(SPLIT_CONFIG.sourceContainerId), {
  childList: true,
  subtree: true
})
renderSplitBlocks()

• 拿到后端SQL返回的新表格数据时，只需要把完整的带原始表头、全量数据行的HTML塞回#FIller1容器即可，上面的监听逻辑会自动识别内容变化，重新按规则拆分块
• 如果最后一个块的行数不足3行，会自动保留所有剩余行，不会生成无内容的空块
• 调整块的排列列数、单块最大行数时，只需要修改顶部的SPLIT_CONFIG配置值即可，不需要改动核心拆分逻辑

内容的提问来源于stack exchange，提问作者Péter Nagy