HTML表格实现分页

HTML本身不支持分页，但可以通过CSS和JavaScript来实现表格分页。以下是一种实现方法：

1. 在HTML中，将整个表格包含在一个div中，并设置其id为“table-wrapper”。

<div id="table-wrapper">
  <table>
    <!-- 表格内容 -->
  </table>
</div>

2. 在CSS中，设置表格外部div的高度和overflow属性，使其能够显示固定高度的内容，并添加分页样式。

#table-wrapper {
  height: 400px; /* 设置表格高度 */
  overflow: auto; /* 显示滚动条 */
}

/* 分页样式 */
.page-link {
  display: inline-block;
  padding: 5px;
  border: 1px solid #ccc;
  margin-right: 5px;
  cursor: pointer;
}
.page-link.active {
  background-color: #ccc;
  color: #fff;
}

3. 在JavaScript中，根据每页显示的行数和总行数计算分页数量，并添加分页按钮。点击分页按钮时，通过修改表格的scrollTop属性来实现表格滚动。

var tableWrapper = document.getElementById('table-wrapper');
var table = tableWrapper.querySelector('table');
var rowsPerPage = 10; // 每页显示的行数
var totalRows = table.rows.length - 1; // 总行数（减去表头）
var totalPages = Math.ceil(totalRows / rowsPerPage); // 分页数量

// 添加分页按钮
for (var i = 1; i <= totalPages; i++) {
  var pageLink = document.createElement('span');
  pageLink.classList.add('page-link');
  pageLink.innerText = i;
  pageLink.dataset.page = i;
  pageLink.addEventListener('click', function() {
    var page = parseInt(this.dataset.page);
    var scrollTop = (page - 1) * rowsPerPage * table.rows[1].offsetHeight; // 计算scrollTop
    tableWrapper.scrollTop = scrollTop;
    updatePageLinks(page); // 更新分页按钮样式
  });
  tableWrapper.parentNode.insertBefore(pageLink, tableWrapper.nextSibling);
}

// 更新分页按钮样式
function updatePageLinks(activePage) {
  var pageLinks = tableWrapper.parentNode.querySelectorAll('.page-link');
  for (var i = 0; i < pageLinks.length; i++) {
    var page = parseInt(pageLinks[i].dataset.page);
    pageLinks[i].classList.toggle('active', page === activePage);
  }
}

这样就可以实现表格分页功能了。需要注意的是，如果表格中有跨行或跨列的单元格，会影响分页的计算和渲染。