Fixed Table header in Semantic UI

Question

I'm trying to fixed the header in the table, such that the content can scroll within a fixed height. I have achieved some part of it. but still struggling to make it right. Can any one have a look and help me fixing this? JsFiddle link is given below thanks. Css is shown below

https://jsfiddle.net/gggxca3u/

#dataSink td {
   border: 0px;
 }
  #dataSink {
    table-layout:fixed;
    border-collapse: collapse;
  }

 #dataSink tr {
   border: 0px;
 }

 #dataSink tbody {
   display: block;
   overflow-y: auto;
   height: 220px;
 }

 #datasink thead tr {
   display: block;
   position: relative;
 }