如何在滚动时锁定表的第一行和第一列，可能使用JavaScript和CSS？ [英] How can I lock the first row and first column of a table when scrolling, possibly using JavaScript and CSS?

问题描述

当您激活冻结窗格时，如何创建一个表格，其第一行和第一列都被锁定（如在Excel中）？我需要表格来水平和垂直滚动（很多解决方案存在，但只允许垂直滚动）。

How can I create a table that has its first row and first column both locked, as in Excel, when you activate 'freeze panes'? I need the table to both scroll horizontally and vertically (a lot of solutions for this exist, but only allow vertical scrolling).

所以，当你在表中向下滚动，第一行将保持put，因为它将具有列标题。这可能最终会出现在 thead 中，也可能不会，不管使解决方案更容易。

So, when you scroll down in the table, the first row will stay put, since it will have the column headings. This may end up being in a thead, or it may not, whatever makes the solution easier.

向右滚动，第一列保持为put，因为它保存了行的标签。

When you scroll right, the first column stays put, since it holds the labels for the rows.

我很确定这不可能与CSS单独，但任何人都可以指向我面向JavaScript解决方案？

I'm pretty certain this is impossible with CSS alone, but can anyone point me toward a JavaScript solution? It needs to work in all major browsers.

推荐答案

哦，我找了一个固定列的可滚动表来了解需要。

Oh well, I looked up for scrollable table with fixed column to understand the need of this specific requirement and your question was one of it with no close answers..

我回答了这个问题，其中灵感来展示我作为插件的工作 https://github.com/meetselva/fixed-table -rows-cols

插件基本上将格式良好的HTML表转换为具有固定表头和列的可滚动表。

The plugin basically converts a well formatted HTML table to a scrollable table with fixed table header and columns.

用法如下，

$('#myTable').fxdHdrCol({
    fixedCols    : 3,       /* 3 fixed columns */
    width        : "100%",  /* set the width of the container (fixed or percentage)*/
    height       : 500      /* set the height of the container */
});

您可以检查演示和文档

这篇关于如何在滚动时锁定表的第一行和第一列，可能使用JavaScript和CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！