滚动时如何锁定表格的第一行和第一列，可能使用 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).

因此，当您在表格中向下滚动时，第一行将保持不变，因为它将具有列标题.这可能最终会出现在 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.

向右滚动时，第一列保持不变，因为它包含行的标签.

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..

我回答了这个问题 带有固定滚动行和固定滚动列的大型动态 html 表格，这激发了我将我的作品展示为插件的灵感 https://github.com/meetselva/fixed-table-rows-cols

I answered this question Large dynamically sized html table with a fixed scroll row and fixed scroll column which inspired to showcase my work as a plugin 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屋！