Fixed Header/Scrollable Table with Variable Width

Question

I realize this question has been asked quite a bit on Stack Overflow; however, after looking through a number of them, I believe my question has one more requirement. I want to transform a regular html table, into a table that can be scrolled both vertically and horizontally, while the the header remains at the top. The width of this table exceeds the width of the page, so I need the headers to move horizontally as the table is scrolled. I would prefer to use a pure CSS method; however, I will use Javascript if necessary. Have yet to find a solution that does all of this.

I can understand wanting your header to "stick" while scrolling vertically, but why horizontally? Wouldn't that defeat the purpose of a table header (each of which labels the column beneath it)? — peterjmag
– peterjmag, Commented Aug 19, 2010 at 3:23

Miriam Salzer · Accepted Answer · 2011-05-07 16:01:11Z

2

This solution might work for you depending on the style of your headers. It's pure CSS. http://salzerdesign.com/blog/?p=191

answered May 7, 2011 at 16:01

Miriam Salzer

1,2421 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Epik · Accepted Answer · 2012-06-14 23:27:18Z

1

Why would you not just use a and set a height and width for it allowing overflow. Then just simply place your table in there and you are good to go.

To me that just seems like the most logic and easiest way to go about it...

answered Jun 14, 2012 at 23:27

Epik

211 bronze badge

Comments

Community · Accepted Answer · 2017-05-23 12:10:39Z

0

well you can use JQuery to do this in few lines of code, you can see my other post to create a table with fix header and scrollable body

Create Table with scrollable body

after that lets imagine you have one div for the headers with class name = "Top1" and one div for the body with class name = "Top2", you can bind the scroll of one to the other

$('.Top2').bind('scroll', function(){
  $(".Top1").scrollLeft($(this).scrollLeft());
});

$('.Top1').bind('scroll', function(){
  $(".Top2").scrollLeft($(this).scrollLeft());
});

jsFliddle demo

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Jul 19, 2013 at 20:59

LemonCool

1,27010 silver badges20 bronze badges

Comments

Pang · Accepted Answer · 2017-05-24 04:51:19Z

0

Here is a good jQuery plugin, working in all browsers! (check out the demo)

The result is a table with a fixed header, scrolling (for the moment..) only vertically, but with a variable width.

I develop this plugin to meet the problem of fixed header + flexible width.

Check it: https://github.com/benjaminleouzon/tablefixedheader

edited May 24, 2017 at 4:51

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Aug 23, 2010 at 12:11

bln

3201 silver badge5 bronze badges

2 Comments

bln Over a year ago

I didn't use any window resizing observers ;-)

Michael Scheper Over a year ago

HTTP 404. This is why it's always best to include code in answers.

Collectives™ on Stack Overflow

Fixed Header/Scrollable Table with Variable Width

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related