html table make 2nd tbody scrollable

Question

i have this fiddle - https://jsfiddle.net/nish4114/u4kfxc48/

and wanted to make a scroll only on the second tbody so that after 4 or 5 td there should be a scroll in it and also header should be fixed

Please let me know how to make it possible

https://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody — Arivu Ilan, Jul 19 '17 at 10:09
batter way is you create second table inside table instead of second tbody. — brijrajsinh, Jul 19 '17 at 13:14

Sadhu · Answer 1 · 2017-07-19T12:45:51.143

0

Add below Class to second table tbody:

.table2Scroll {
    height: 100px;
    display: block;
    overflow-y: auto;
}

Now Try this :

thead, tbody {
  display: block;
  border: 1px solid black;
  width: 400px;
}
tbody:nth-child(4) {
  height: 75px;
  overflow-y: auto;
  width: 400px;
}

th, td {
  width: 100px;
}

edited Jul 19 '17 at 12:45

answered Jul 19 '17 at 10:35

Sadhu

850
2
9
18

there got some alignment error in the second table isnt it ? – user4965201 Jul 19 '17 at 13:49

html table make 2nd tbody scrollable

1 Answers1