Creating css scrollable table with fixed header - css

Question

I have a little problem since 2 weeks ago and I was searching through the internet and this site over and over but none of the current solutions seem to do the trick.
I am trying to upgrade a web application (actually only the design of it). I have a non scrollable table which was programmed from another person that needs to serve as data entry for large amount of relations and products. The problem is the visibility of the header which I want to make fixed, but the table to be scrollable. I have tried css codes like position:absolute, or overflow:scroll etc.. but none of them seem to add scrollbar on the right side of the table. If there is anyone that can help even a little bit would be greatly appreciated. Here is the code I have so far:
/* TABLE
----------------------------------------------------------*/
/*table { table-layout: fixed; }*/
/*.th, .td { width: 30; break-word: word-wrap;}*/
.table
{
table-layout: fixed;
overflow: hidden;
border:solid;
border-width:thin;
border-bottom-style:solid;
border-color:Black;
table-layout:fixed;
border-collapse:collapse;
background-color:White;
}
.tBody
{
margin-top:196px;
}
.tdVisible
{
/*font-weight:normal;*/
color:Black;
border-spacing:0px;
border:solid;
border-width:thin;
background-color: rgb(229,229,239);
break-word: word-wrap;
}
.tdHeader
{
width:40px;
break-word: word-wrap;
/*min-width:150px;*/
min-width:30px;
min-height:60px;
/*width:150px;
height:126px;*/
border:solid;
border-width:thin;
font-weight:normal;
font-size:12px;
/*position:fixed;*/
overflow:hidden;
z-index:100;
margin-left: -2px;
margin-top: -2px;
}
.tdRow
{
/*width:20px;
break-word: word-wrap;*/
height:20px;
max-height:22px!important;
}
.tdRowLast
{
font-weight:bold!important;
text-align:right!important;
}
.tdLongID
{
/*width:60px;
min-width: 60px;
max-width:60px;*/
width:60px;
min-width:60px;
max-width:60px;
border:solid;
border-width:thin;
}
.tdItemName
{
/*width:315px;
min-width:315px;*/
width:250px;
min-width:250px;
border:solid;
border-width:thin;
}
.tdShortID
{
width:20px;
border:solid;
border-width:thin;
min-width:20px;
max-width:20px;
}
.tdCol
{
/*width:94px;*/
width:40px;
break-word: word-wrap;
border:solid;
border-width:thin;
font-weight:normal!important;
padding-left: 1px;
padding-right: 0px;
}
.tdData
{
height:20px;
border:solid;
border-width:thin;
}
.tdInside
{
width:20px;
border:solid;
border-width:thin;
background-color: rgb(229,229,229);
padding-left:1px;
padding-right:1px;
text-align:center;
break-word: word-wrap;
}
So there is actually a Javascript that creates the table reading from database in order to make it with the right clients and products. The only thing I'm trying to change is the table header to stay in one place and me to be able to scroll down the table while viewing it on screen all the time.
Hope to get some help from you.

Answer 1

With thead and tbody that should works :
Here a fiddle to start