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

问题描述

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

所以，当你在表中向下滚动，第一行将保留put，因为它将有列标题。这可能最终会在 thead 中，否则可能无法使解决方案更容易。

当你向右滚动，第一列保持放置，因为它包含行的标签。

我很确定这是不可能的CSS，但任何人都可以指出我向JavaScript解决方案？它需要在所有主流浏览器中工作。

解决方案

呵呵，我抬头看看带有固定列的可滚动表，以了解需要这个具体要求和你的问题是其中一个没有接近的答案..

我回答了这个问题具有固定滚动行和固定滚动列的大型动态大小的html表，它启发了我的工作作为插件展示 https://github.com / meetselva / fixed-table-rows-cols

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

使用情况如下，

  $（'＃myTable' ）.fxdHdrCol（{
 fixedCols：3， / * 3固定列* / 
 width：100％，/ *设置容器的宽度（固定或百分比）* / 
 height：500 / *设置容器的高度* / 
}）; 
  

您可以查看演示和文档在这里

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

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.

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

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

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

The usage is as below,

$('#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 */
});

You can check the demo and documentation here

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