如何用CSS/HTML实现表格列分页：指定列数后换页

针对15列表格按每5列一页拆分的需求，下面提供AngularJS结合HTML/CSS的动态实现方案，同时附上纯CSS的静态打印分页方案作为补充。

一、AngularJS动态实现（适配ng-repeat场景） #

这个方案通过AngularJS控制器拆分列数据，配合分页控件切换显示不同列组，完全适配ng-repeat渲染的表格。

1. 完整代码示例 #

<!DOCTYPE html>
<html ng-app="columnPaginationApp">
<head>
    <style>
        .table-container {
            margin: 20px;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .pagination-controls {
            margin: 10px 0;
        }
        .pagination-btn {
            padding: 6px 12px;
            margin-right: 4px;
            cursor: pointer;
            border: 1px solid #ddd;
            background: #fff;
        }
        .pagination-btn.active {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }
    </style>
</head>
<body ng-controller="ColumnPaginationCtrl">
    <div class="table-container">
        <!-- 分页控件 -->
        <div class="pagination-controls">
            <button 
                class="pagination-btn" 
                ng-class="{active: currentPage === pageIndex}"
                ng-repeat="(pageIndex, pageColumns) in columnPages"
                ng-click="switchPage(pageIndex)"
            >
                第 {{pageIndex + 1}} 页
            </button>
        </div>

        <!-- 表格 -->
        <table>
            <thead>
                <tr>
                    <th ng-repeat="col in columnPages[currentPage]">
                        {{col.title}}
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="row in tableData">
                    <td ng-repeat="col in columnPages[currentPage]">
                        {{row[col.field]}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        angular.module('columnPaginationApp', [])
        .controller('ColumnPaginationCtrl', function($scope) {
            // 配置：每页显示的列数
            $scope.columnsPerPage = 5;
            // 当前页码（从0开始）
            $scope.currentPage = 0;

            // 模拟15列的表格列配置（含标题和字段名）
            $scope.allColumns = [
                {title: '列1', field: 'col1'}, {title: '列2', field: 'col2'}, {title: '列3', field: 'col3'},
                {title: '列4', field: 'col4'}, {title: '列5', field: 'col5'}, {title: '列6', field: 'col6'},
                {title: '列7', field: 'col7'}, {title: '列8', field: 'col8'}, {title: '列9', field: 'col9'},
                {title: '列10', field: 'col10'}, {title: '列11', field: 'col11'}, {title: '列12', field: 'col12'},
                {title: '列13', field: 'col13'}, {title: '列14', field: 'col14'}, {title: '列15', field: 'col15'}
            ];

            // 模拟表格行数据
            $scope.tableData = [
                {col1: '行1-1', col2: '行1-2', col3: '行1-3', col4: '行1-4', col5: '行1-5', col6: '行1-6', col7: '行1-7', col8: '行1-8', col9: '行1-9', col10: '行1-10', col11: '行1-11', col12: '行1-12', col13: '行1-13', col14: '行1-14', col15: '行1-15'},
                {col1: '行2-1', col2: '行2-2', col3: '行2-3', col4: '行2-4', col5: '行2-5', col6: '行2-6', col7: '行2-7', col8: '行2-8', col9: '行2-9', col10: '行2-10', col11: '行2-11', col12: '行2-12', col13: '行2-13', col14: '行2-14', col15: '行2-15'}
            ];

            // 拆分列为分页组
            $scope.splitColumnsIntoPages = function() {
                $scope.columnPages = [];
                for (let i = 0; i < $scope.allColumns.length; i += $scope.columnsPerPage) {
                    $scope.columnPages.push($scope.allColumns.slice(i, i + $scope.columnsPerPage));
                }
            };

            // 切换页码
            $scope.switchPage = function(pageIndex) {
                $scope.currentPage = pageIndex;
            };

            // 初始化拆分列
            $scope.splitColumnsIntoPages();
        });
    </script>
</body>
</html>

2. 核心逻辑说明 #

• 列拆分：通过splitColumnsIntoPages方法将15列的数组按每5列一组拆分成3个页面对应的列数组，存储在columnPages中。
• 分页切换：点击分页按钮时，更新currentPage变量，表格的ng-repeat会自动渲染当前页对应的列。
• 数据绑定：表格表头和单元格通过columnPages[currentPage]获取当前页的列配置，动态渲染对应内容。

二、纯CSS打印分页方案（适合静态表格） #

如果只需要在打印时实现列分页，可以用CSS的page-break-after属性配合列分组，无需JS：

<style>
    @media print {
        .column-group {
            display: table;
            width: 100%;
            page-break-after: always;
        }
        .column-group:last-child {
            page-break-after: avoid;
        }
    }
</style>

<table>
    <thead>
        <tr>
            <div class="column-group">
                <th>列1</th><th>列2</th><th>列3</th><th>列4</th><th>列5</th>
            </div>
            <div class="column-group">
                <th>列6</th><th>列7</th><th>列8</th><th>列9</th><th>列10</th>
            </div>
            <div class="column-group">
                <th>列11</th><th>列12</th><th>列13</th><th>列14</th><th>列15</th>
            </div>
        </tr>
    </thead>
    <tbody>
        <tr>
            <div class="column-group">
                <td>行1-1</td><td>行1-2</td><td>行1-3</td><td>行1-4</td><td>行1-5</td>
            </div>
            <div class="column-group">
                <td>行1-6</td><td>行1-7</td><td>行1-8</td><td>行1-9</td><td>行1-10</td>
            </div>
            <div class="column-group">
                <td>行1-11</td><td>行1-12</td><td>行1-13</td><td>行1-14</td><td>行1-15</td>
            </div>
        </tr>
        <!-- 其他行同理 -->
    </tbody>
</table>

这个方案在打印时会自动将每个column-group作为单独一页，适合静态表格的打印需求。

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