Freezing / Fixed table header does no longer comply with IE10

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;
}