First Row Of Table Disappears Once The Column Headers Are Fixed (sticky Header)

I need your help, I can't seem to figure out as to why the first row in the table (ABC-123-123456) disappears or appears to be hidden once the top columns are fixed. As my work use

Solution 1:

add this

#data tbody{
position: absolute;
top: 24px;
}

Solution 2:

Remove position:absolute from #data thead tr.

jsfiddle