如何创建列属性一致的矩阵式表格并实现分页功能？

I get exactly what you need here—instead of a traditional table where columns represent distinct data attributes, you want a grid-style matrix where every cell holds an item from the same group, plus pagination controls to navigate through batches of these items. Let's build this with vanilla HTML, CSS, and JavaScript (no external libraries required):

Step 1: Basic Structure & Styling #

First, we'll set up the HTML container and add clean, responsive styling to make the matrix look polished and pagination controls intuitive:

<!DOCTYPE html>
<html>
<head>
    <style>
        .matrix-container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 0 1rem;
        }
        .matrix-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 1.5rem;
        }
        .matrix-table td {
            border: 1px solid #e0e0e0;
            padding: 1.2rem;
            text-align: center;
            width: 33.33%; /* 3 columns per row, tweak as needed */
            background-color: #f9f9f9;
        }
        .matrix-table td:hover {
            background-color: #f0f0f0;
        }
        .pagination-controls {
            display: flex;
            gap: 0.8rem;
            justify-content: center;
            align-items: center;
        }
        .pagination-btn {
            padding: 0.6rem 1.2rem;
            border: 1px solid #ddd;
            background: #fff;
            cursor: pointer;
            border-radius: 4px;
            transition: background 0.2s;
        }
        .pagination-btn:hover:not(:disabled) {
            background-color: #f5f5f5;
        }
        .pagination-btn:disabled {
            cursor: not-allowed;
            opacity: 0.5;
        }
        .page-info {
            font-size: 0.95rem;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="matrix-container">
        <table class="matrix-table" id="matrixTable"></table>
        <div class="pagination-controls">
            <button class="pagination-btn" id="prevBtn">上一页</button>
            <span class="page-info" id="pageInfo"></span>
            <button class="pagination-btn" id="nextBtn">下一页</button>
        </div>
    </div>
</body>
</html>

Step 2: Pagination & Matrix Rendering Logic #

Next, we'll add JavaScript to handle splitting our 15 items into pages, rendering the matrix layout, and updating the pagination controls:

// Your full list of items (replace with your actual content)
const items = Array.from({length: 15}, (_, i) => `Item ${i + 1}`);
const itemsPerPage = 6; // Number of items to show per page
const columnsPerRow = 3; // Columns in each matrix row
let currentPage = 1;
const totalPages = Math.ceil(items.length / itemsPerPage);

// Grab DOM elements
const matrixTable = document.getElementById('matrixTable');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const pageInfo = document.getElementById('pageInfo');

// Render the current page's matrix
function renderCurrentPage() {
    // Clear existing table content
    matrixTable.innerHTML = '';
    
    // Calculate which items to show on this page
    const startIdx = (currentPage - 1) * itemsPerPage;
    const endIdx = Math.min(startIdx + itemsPerPage, items.length);
    const pageItems = items.slice(startIdx, endIdx);
    
    // Build rows and cells for the matrix
    let currentRow = document.createElement('tr');
    
    pageItems.forEach((item, idx) => {
        const cell = document.createElement('td');
        cell.textContent = item;
        currentRow.appendChild(cell);
        
        // Start a new row after every N columns, or if it's the last item
        if ((idx + 1) % columnsPerRow === 0 || idx === pageItems.length - 1) {
            matrixTable.appendChild(currentRow);
            currentRow = document.createElement('tr');
        }
    });
    
    // Update page status text
    pageInfo.textContent = `第 ${currentPage} 页 / 共 ${totalPages} 页`;
    
    // Toggle button states
    prevBtn.disabled = currentPage === 1;
    nextBtn.disabled = currentPage === totalPages;
}

// Add pagination button listeners
prevBtn.addEventListener('click', () => {
    if (currentPage > 1) {
        currentPage--;
        renderCurrentPage();
    }
});

nextBtn.addEventListener('click', () => {
    if (currentPage < totalPages) {
        currentPage++;
        renderCurrentPage();
    }
});

// Initialize the matrix on page load
renderCurrentPage();

Quick Customization Tips #

• Adjust layout: Tweak itemsPerPage to change how many items appear per page, or columnsPerRow to switch between 2-column, 3-column, etc., layouts.
• Customize content: Replace the items array with your actual content (images, links, cards)—just update the cell.textContent = item line to render whatever you need in each cell.
• Tweak styling: Modify the CSS to match your design system—change colors, padding, border styles, or add media queries to make the matrix responsive on mobile.

This setup gives you a fully functional matrix table where all items belong to the same group, with smooth pagination to navigate through batches of content.

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