动态表格垂直和水平滚动粘性标题和固定列

Question

I'm developing a solution that presents table like data to the user and the requirements are as follows:

Horizontal scrolling within fixed dimensions. As you scroll horizontally the first column must be sticky and follow the user as they scroll.

Vertical scrolling with a sticky header as the user scrolls up or down they can always see the header.

Found one solution here: http://www.fixedheadertable.com/ which does what I want however, after implementing with my site the table changes width based on the window dimensions. This is not ideal.

I've posted multiple questions on here about this with no conclusive answers.

Primarily asking if anyone knows of any plugins or done something similar to point me in the right direction.

Answer 1

Try SlickGrid:

SlickGrid is an advanced JavaScript grid. Some highlights:

• Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness)

• Column resize/reorder/show/hide

Answer 2

Apply exact width for each column. I hope the sticky header and table contents are in separate tables. So you have to specify width for header as well as table content separately. For example the first <td> of sticky header and first <td> of tabular data should have same width. apply width like this for all columns.

Answer 3

Here I found the solution / exact functionality I was looking for .

http://codepen.io/ourmaninamsterdam/full/jyBGz/