如何设置HTML表格打印为A4纸每页4行3列共12单元格

方案1：通过JS拆分数据生成分页表格 #

既然是数组循环生成内容，直接在数据层面拆分，每12个元素为一组，每组生成一个包含4行3列的独立表格块，同时添加分页控制：

// 假设你的数据数组是 dataList
const dataList = [/* 你的数据项 */];
const itemsPerPage = 12; // 每页12个单元格
const rowsPerPage = 4;
const colsPerRow = 3;

const container = document.getElementById('print-container');

// 拆分数据为每页一组
for (let i = 0; i < dataList.length; i += itemsPerPage) {
  const pageItems = dataList.slice(i, i + itemsPerPage);
  
  // 创建分页容器，添加分页符样式
  const pageDiv = document.createElement('div');
  pageDiv.classList.add('print-page');
  
  // 创建表格
  const table = document.createElement('table');
  table.classList.add('page-table');
  
  // 生成4行，每行3个单元格
  for (let row = 0; row < rowsPerPage; row++) {
    const tr = document.createElement('tr');
    for (let col = 0; col < colsPerRow; col++) {
      const index = row * colsPerRow + col;
      const td = document.createElement('td');
      // 如果当前组有对应数据就填充，否则留空
      td.textContent = pageItems[index] || '';
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }
  
  pageDiv.appendChild(table);
  container.appendChild(pageDiv);
}

配套CSS：

@page {
  size: A4;
  margin: 0;
}

@media print {
  html, body {
    width: 16cm;
    height: 21cm;
    margin: 0;
    padding: 0;
  }
  
  .print-page {
    width: 16cm;
    height: 21cm;
    page-break-after: always;
  }
  
  .page-table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
  }
  
  .page-table td {
    border: 1px solid #000;
    box-sizing: border-box;
    padding: 8px;
  }
  
  /* 移除最后一页的多余分页符 */
  .print-page:last-child {
    page-break-after: avoid;
  }
}

方案2：CSS网格布局实现分页（少改JS） #

如果不想改动原有JS生成的表格结构，可将所有<td>放到统一容器中，用网格布局强制4行3列，并控制分页：

调整HTML结构：

<div id="print-container" class="grid-container">
  <!-- 循环生成的<td>元素 -->
  <td>数据1</td>
  <td>数据2</td>
  <!-- ... 更多数据项 -->
</div>

配套CSS：

@page {
  size: A4;
  margin: 0;
}

@media print {
  html, body {
    width: 16cm;
    height: 21cm;
    margin: 0;
    padding: 0;
  }
  
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    width: 16cm;
    height: 21cm;
    page-break-after: always;
    gap: 0;
  }
  
  .grid-container:last-child {
    page-break-after: avoid;
  }
  
  .grid-container td {
    border: 1px solid #000;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 8px;
    word-break: break-all; /* 防止长内容撑破单元格 */
  }
}

关键注意事项 #

• 打印时选择「实际尺寸」模式，避免浏览器自动缩放内容
• 若单元格内容过长，可通过调整字体大小或word-break属性控制显示
• 测试时可通过浏览器打印预览功能实时调整样式

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