Freezing / Fixed table header does no longer comply with IE10 - html

Question

I need your help,
What used to work in IE7 was the below to freeze the top row (header) of an HTML table:
#data tr th {
top: expression(this.offsetParent.scrollTop);
position: relative;
}
It seems that this is no longer the case with IE10. That said, how can my existing coding be modified such that I would be able to freeze the top header row of my table like good old times lol
I've made a fiddle here: http://jsfiddle.net/8qq9Z/3/
Here is the CSS markup:
#data_container {
height: 160px;
border: 1px solid #808080;
scrollbar-base-color: #DFDFDF;
scrollbar-arrow-color: #235A81;
overflow-y: scroll;
overflow-x: scroll;
margin-top: 5px;
padding:0px;
position: relative;
}
#data {
color: rgb(11,63,113);
border: 0px;
width: 100%;
cursor: default;
table-layout: fixed;
margin:0px;
border:0px;
border-collapse:collapse;
}
#data th {
height: 18px;
cursor: pointer;
padding: 3px;
width: 140px;
border-top: none;
border-bottom: 1px solid rgb(128,128,128);
border-right: 1px solid rgb(128,128,128);
}
#data td {
padding: 3px;
border-right: 1px solid rgb(128,128,128);
border-bottom: 1px solid rgb(128,128,128);
}
#data th:hover {
text-decoration: underline;
}
#data tr th {
top: expression(this.offsetParent.scrollTop);
position: relative;
}
#data th:first-child {
border-left: 0;
}