HTML Table with multiple rows header fixed and columns fixed

Question

I have html table as below;

https://jsfiddle.net/supun151515/fwL8ut4k/

http://jsfiddle.net/supun151515/AC725/16/ -->jquery plugin

I want to make headers fixed and first 7 columns fixed. I have tried with many jQuery plugins even pure CSS;

tbody {
 float: left; display: block; overflow-y: scroll; max-height: 100px;
}
tr {
float: left; display: block;
}
td {
float: left; display: block;
}

Nothing worked for me. Any good jQuery plugin to work with multiple rows header or pure CSS is appreciated.

Swinky · Accepted Answer · 2017-06-26 10:57:26Z

2

If you want a table where only the columns scroll horizontally and headers remain fixed, you can `

position: absolute

the first 7 columns and your row header (and specify their width explicitly), and then wrap the entire table in an overflow-x: scroll block.

Here is an example for your reference :

https://jsfiddle.net/RMarsh/bzuasLcz/3/

answered Jun 26, 2017 at 10:57

Swinky

3691 gold badge3 silver badges10 bronze badges

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

2 Comments

Supun Silva Over a year ago

I am using multi rows header, check your fiddle with my updated table structure. The table should looks like as shown in picture imgur.com/a/yapMq

yenren Over a year ago

Your example is close to what I am trying to accomplish. How do you fix multiple columns? Say, the first four columns, for example? While keeping the header also fixed.

Collectives™ on Stack Overflow

HTML Table with multiple rows header fixed and columns fixed

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related