HTML动态表格打印时如何按每10行设置分页？

问题描述 #

我有一个支持用户动态添加行的HTML表格，当表格行数较多时，打印会出现内容截断、部分行无法显示的问题。我希望每10行就自动分页（第11行、21行等跳转到下一页），同时页面页脚也随分页调整。我考虑使用分页符，但现有示例多针对固定行表格，不清楚如何应用到动态表格中，给td设置分页符也无效。以下是我的表格示例代码：

<table>
  <thead>
    <tr>
      <th>Building Number</th>
      <th>Building Type</th>
      <th>Fund Source/s</th>
      <th>Specific Fund Source/s</th>
      <th>Building Condition</th>
      <th>Number of Storeys</th>
      <th>Number of Rooms</th>
      <th>Year </th>
      <th>Classification of Building</th>
      <th>Is building PWD Accessible?</th>
      <th>Have undergone major repair for the last 5 years</th>
      <th>With Certificate of Acceptance</th>
      <th>Is the school building included in the Book of Accounts</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td>
        <select name="isPWDAccessible">
          <option value="">Select</option>
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>
      </td>
      <td>
        <select name="majorRepair">
          <option value="">Select</option>
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>
      </td>
      <td>
        <select name="certificateOfAcceptance">
          <option value="">Select</option>
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>
      </td>
      <td>
        <select name="Accounts">
          <option value="">Select</option>
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

实现方案 #

1. 打印专用CSS配置

添加以下CSS，控制分页规则、表头重复显示和页脚样式：

@media print {
  /* 确保表格边框完整，避免打印截断 */
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #000;
    padding: 8px;
  }
  /* 强制表头在每一页顶部重复显示 */
  thead {
    display: table-header-group;
  }
  /* 分页标记类：在目标行前插入分页符 */
  .page-break-before {
    page-break-before: always !important;
  }
  /* 固定页脚到每页底部 */
  .print-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 10px;
    border-top: 1px solid #000;
    font-size: 12px;
  }
  /* 预留页脚空间，避免内容被覆盖 */
  body {
    margin-bottom: 60px;
  }
}

2. JS动态处理分页标记

编写JavaScript，在表格行变化时自动给指定行添加分页类（每10行分页一次）：

// 核心分页处理函数
function setTablePagination() {
  const tbody = document.querySelector('table tbody');
  const rows = tbody.querySelectorAll('tr');
  const rowsPerPage = 10; // 每页显示10行数据

  // 清除已有分页标记
  rows.forEach(row => row.classList.remove('page-break-before'));

  // 从第11行开始（索引10），每10行添加分页符
  for (let i = rowsPerPage; i < rows.length; i += rowsPerPage) {
    rows[i]?.classList.add('page-break-before');
  }
}

// 绑定添加行按钮事件（假设按钮id为addRowBtn）
document.getElementById('addRowBtn')?.addEventListener('click', () => {
  // 克隆现有行并添加到tbody
  const tbody = document.querySelector('table tbody');
  const newRow = tbody.querySelector('tr').cloneNode(true);
  
  // 清空新行的输入内容
  newRow.querySelectorAll('td[contenteditable="true"]').forEach(td => td.textContent = '');
  newRow.querySelectorAll('select').forEach(sel => sel.selectedIndex = 0);
  
  tbody.appendChild(newRow);
  // 添加行后重新计算分页
  setTablePagination();
});

// 页面加载时初始化分页
window.addEventListener('load', setTablePagination);

3. 添加全局打印页脚

在页面末尾添加页脚元素，确保每页打印都显示：

<div class="print-footer">学校建筑信息表 - 第<span id="pageNum"></span>页</div>

注意事项 #

• 不同浏览器对page-break属性的支持略有差异，建议在Chrome、Firefox中测试
• 如果表格行存在内容换行情况，需根据实际行高调整rowsPerPage数值，避免分页后内容溢出
• 若需自定义页码，可结合beforeprint事件编写JS计数逻辑，部分浏览器也支持自动生成页码

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