带有合并单元格的表格无限滚动（定义的 colspan/rowspan）答案

【问题标题】：Infinite scroll on table with merged cells (defined colspan/rowspan)带有合并单元格的表格无限滚动（定义的 colspan/rowspan）
【发布时间】：2025-11-25 07:55:01
【问题描述】：

如何在合并单元格的表格上实现无限滚动？

我想实现需要处理大量数据的透视网格。困难在于只绘制标题的可见部分（+ 滚动缓冲区）。

可能的解决方案：

没有平滑滚动，离散地重绘所有表头。（我想要光滑）
实现 div-table 并组织在滚动事件上创建和删除项目。（找不到包含合并单元格的动态 div 表的示例）
根据需要创建和删除的表序列实现表头。（删除边框，在附近的表格之间共享标签）示例：

var xHeaderWrapperEl = document.querySelector(".header-wrapper");
var xHeaderTableEl = document.querySelector(".header-table");

xHeaderWrapperEl.addEventListener("scroll", function () {
    if (xHeaderWrapperEl.scrollLeft >= xHeaderTableEl.offsetWidth - xHeaderWrapperEl.offsetWidth){
        console.log("scroll next page");
    } else if (xHeaderWrapperEl.scrollLeft <= 0) {
        console.log("scroll prev page");
    } else {
        console.log("scroll");
    }
});

.header-wrapper {
    overflow-x: scroll;
    width: 250px;
    height: auto;
    display: flex;
    //flex-flow: row nowrap;
}

<body>
    <div class="header-wrapper">
        <!-- 1st block -->
        <table class="header-table" border="1">
            <tr>
                <td colspan="10"><div>0x1</div></td>
            </tr>
            <tr>
                <td colspan="2"><div>1x1</div></td>
                <td colspan="8" rowspan="2"><div>1x2</div></td>
            </tr>
            <tr>
                <td colspan="2"><div>2x1</div></td>
            </tr>
            <tr>
                <td><div>3x1</div></td>
                <td><div>3x2</div></td>
                <td><div>3x3</div></td>
                <td><div>3x4</div></td>
                <td><div>3x5</div></td>
                <td><div>3x6</div></td>
                <td><div>3x7</div></td>
                <td><div>3x8</div></td>
                <td><div>3x9</div></td>
                <td><div>3x10</div></td>
            </tr>
        </table>
        <!-- 2nd block -->
        <table class="header-table" border="1">
            <tr>
                <td colspan="4"><div>0x1</div></td>
                <td colspan="6"><div>0x2</div></td>
            </tr>
            <tr>
                <td colspan="4" rowspan="2"><div>1x1</div></td>
                <td colspan="6"><div>1x2</div></td>
            </tr>
            <tr>
                <td colspan="6"><div>2x1</div></td>
            </tr>
            <tr>
                <td><div>3x1</div></td>
                <td><div>3x2</div></td>
                <td><div>3x3</div></td>
                <td><div>3x4</div></td>
                <td><div>3x5</div></td>
                <td><div>3x6</div></td>
                <td><div>3x7</div></td>
                <td><div>3x8</div></td>
                <td><div>3x9</div></td>
                <td><div>3x10</div></td>
            </tr>
        </table>
        <!-- 3rd block -->
        <table class="header-table" border="1">
            <tr>
                <td colspan="2"><div>0x1</div></td>
                <td colspan="6"><div>0x2</div></td>
                <td colspan="2"><div>0x3</div></td>
            </tr>
            <tr>
                <td colspan="2"><div>1x1</div></td>
                <td colspan="2"><div>1x2</div></td>
                <td colspan="2"><div>1x3</div></td>
                <td colspan="2"><div>1x4</div></td>
                <td colspan="2"><div>1x5</div></td>
            </tr>
            <tr>
                <td colspan="2"><div>2x1</div></td>
                <td colspan="2"><div>2x2</div></td>
                <td colspan="2"><div>2x3</div></td>
                <td colspan="2"><div>2x4</div></td>
                <td colspan="2"><div>2x5</div></td>
            </tr>
            <tr>
                <td><div>3x1</div></td>
                <td><div>3x2</div></td>
                <td><div>3x3</div></td>
                <td><div>3x4</div></td>
                <td><div>3x5</div></td>
                <td><div>3x6</div></td>
                <td><div>3x7</div></td>
                <td><div>3x8</div></td>
                <td><div>3x9</div></td>
                <td><div>3x10</div></td>
            </tr>
        </table>        
    </div>
</body>

注意 flexbox...

【问题讨论】：

如果原则上您可以将表拆分成更小的表，那么方法#3 看起来会更好。滚动时...您是否需要完全无限滚动，或者您会有某种形式的滚动条？
@c-smile 是的，滚动不是无限的，但表格非常大。可能是大约几千万个细胞。 #3 的困难在于相关表的合并。

标签： javascript html css pivot-table olap

【解决方案1】：

我假设根据您的回答，您将拥有 100 万列的表格。

让这样的表格连续滚动是不现实的。从那里滚动/查找/使用信息将需要很长时间。

因此你必须有一些分页/过滤机制。有了分页，你的问题就不那么严重了。将其拆分为包裹在可滚动页面容器中的部分表格块。因此，您将拥有类似于 gmail 消息列表的可滚动页面 - 分页但可滚动。

【讨论】：

分页更糟糕，因为主表有两个轴。在这种情况下，我需要使用左右和上下页面。也许会有所帮助：webix pivot demo。 and my comments。我正在尝试实现可滚动的第三块并在第二块上复制解决方案。谢谢。