javascript - Keeping the row title and column title of a table visible while scrolling - Stack Overflow

admin管理员组

文章数量:1026989

I've got a large table, where the user typically needs to scroll the page to find data. This makes it difficult to track columns/rows once the headers are no longer visible. I'd like to keep the headers visible while scrolling.

I've managed to get the first row (column headers) to stay visible (jsfiddle example), but am at a loss to do the same for the first column.

PS: I don't need an iframe solution (with extra scrolls), but one similar to what I have, but for the first column.

EDIT: I've done it: jsfiddle example

I've got a large table, where the user typically needs to scroll the page to find data. This makes it difficult to track columns/rows once the headers are no longer visible. I'd like to keep the headers visible while scrolling.

I've managed to get the first row (column headers) to stay visible (jsfiddle example), but am at a loss to do the same for the first column.

PS: I don't need an iframe solution (with extra scrolls), but one similar to what I have, but for the first column.

EDIT: I've done it: jsfiddle example

• javascript
• html-table

Share Improve this question Follow edited Sep 15, 2018 at 19:35 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 15, 2011 at 15:26 radonysradonys 61511 gold badge99 silver badges2020 bronze badges 5

• Possible duplicate of: stackoverflow./questions/1030043/… – Quasdunk Commented Sep 15, 2011 at 15:30
• Not a duplicate. I need BOTH the first row and the first column to stay visible. I could't find an answer to this on stackoverflow. – radonys Commented Sep 15, 2011 at 15:34
• 1 There are a lot of working JS solutions out on the web. For example datatables – what you are searching for is a bination of the "FixedColumns" and the "FixedHeader" plug-ins (if using jQuery-datatables). BTW: your solution flickers heavy while scrolling. – feeela Commented Sep 15, 2011 at 15:44
• Note that if you keep scrolling in your example the result flips from bottom of table back to top – mrtsherman Commented Sep 15, 2011 at 19:10
• @mrtsherman You're right, the code is not perfect... – radonys Commented Sep 15, 2011 at 20:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Using JS seems to be a bit overkill for this solution. Working with tables can be a pain in the neck, but there's a CSS property called position: fixed which could be used for this purpose. I've put together a demo which isn't 100% perfect when it es to lining things up, but it demonstrates how to use it for your application.

DEMO: http://wecodesign./demos/stackoverflow-7433377.htm

For those interested, I fixed the flickering and the flipping, and the result is now perfect (for me). (jsfiddle example)

I've got a large table, where the user typically needs to scroll the page to find data. This makes it difficult to track columns/rows once the headers are no longer visible. I'd like to keep the headers visible while scrolling.

I've managed to get the first row (column headers) to stay visible (jsfiddle example), but am at a loss to do the same for the first column.

PS: I don't need an iframe solution (with extra scrolls), but one similar to what I have, but for the first column.

EDIT: I've done it: jsfiddle example

I've got a large table, where the user typically needs to scroll the page to find data. This makes it difficult to track columns/rows once the headers are no longer visible. I'd like to keep the headers visible while scrolling.

I've managed to get the first row (column headers) to stay visible (jsfiddle example), but am at a loss to do the same for the first column.

PS: I don't need an iframe solution (with extra scrolls), but one similar to what I have, but for the first column.

EDIT: I've done it: jsfiddle example

• javascript
• html-table

Share Improve this question Follow edited Sep 15, 2018 at 19:35 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 15, 2011 at 15:26 radonysradonys 61511 gold badge99 silver badges2020 bronze badges 5

• Possible duplicate of: stackoverflow./questions/1030043/… – Quasdunk Commented Sep 15, 2011 at 15:30
• Not a duplicate. I need BOTH the first row and the first column to stay visible. I could't find an answer to this on stackoverflow. – radonys Commented Sep 15, 2011 at 15:34
• 1 There are a lot of working JS solutions out on the web. For example datatables – what you are searching for is a bination of the "FixedColumns" and the "FixedHeader" plug-ins (if using jQuery-datatables). BTW: your solution flickers heavy while scrolling. – feeela Commented Sep 15, 2011 at 15:44
• Note that if you keep scrolling in your example the result flips from bottom of table back to top – mrtsherman Commented Sep 15, 2011 at 19:10
• @mrtsherman You're right, the code is not perfect... – radonys Commented Sep 15, 2011 at 20:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Using JS seems to be a bit overkill for this solution. Working with tables can be a pain in the neck, but there's a CSS property called position: fixed which could be used for this purpose. I've put together a demo which isn't 100% perfect when it es to lining things up, but it demonstrates how to use it for your application.

DEMO: http://wecodesign./demos/stackoverflow-7433377.htm

For those interested, I fixed the flickering and the flipping, and the result is now perfect (for me). (jsfiddle example)

本文标签： javascriptKeeping the row title and column title of a table visible while scrollingStack Overflow