How to create a table with a fixed column and 3 scrollable parts

Question

How would I create an HTML table that looks like the picture?
In my case I have many fields, and I want to show the important ones with fixed column and show the other detail with scrollable bar,
just look at this picture:

I have found this link https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html
But this is not what I want.

score 1 · Answer 1 · edited Jan 18 '17 at 04:05

1

Adding this to the CSS file, to whatever class your using for those table cells...

overflow-y: hidden;
overflow-x: scroll;

See more CSS Overflow handling at http://www.w3schools.com/css/css_overflow.asp

edited Jan 18 '17 at 04:05

zx485

28,498
28
50
59

answered Jan 18 '17 at 03:52

Duane Lortie

1,285
1
12
16

with overflow i just can make one part scrollable table, unlike the picture that i show above (it has 3 scrollable part) – Alexander Chandra Jan 18 '17 at 05:53
You need to assign a CSS *class* to the table cells that you want to behave this way.. something like ` – Duane Lortie Jan 18 '17 at 15:45

score 0 · Answer 2 · edited May 23 '17 at 11:45

0

I would recommend using Datatables and to make some cells have scroll bars is already answered at this post: here

Here is a link to a jsfiddle with jQuery Datatable and Fixed cols and horizontal bar on some cell: jsfiddlejsfiddle Credit of this goes to @davidkonrad from that post linked above.

edited May 23 '17 at 11:45

Community

1
1

answered Jan 18 '17 at 03:53

Waqas

171
2
6

i do using dataTable and this is my datatable code like this http://imgur.com/a/Lh3Te the link that you gave me is similiar to what i want to build, but i cant make it like the picture (its like having 4 table in 1 table) – Alexander Chandra Jan 18 '17 at 04:18

How to create a table with a fixed column and 3 scrollable parts

2 Answers2