fixed table header using browser scroll

CSS, html, javascript fixed table header

HTML

<div class="fixedTableHolder">
    
    <!-- this is the mask that will cover the scrolling table -->
    <div class="maskHolder">
        <div id="mask" class="mask">&nbsp;</div>
    </div>
    
    <div class="fixedTable">
        <div id="theTable" class="theTable">
            <!-- here is the table, header row must have an ID -->
            <table border="0" cellspacing="5" cellpadding="5"> 
                <tr id="thFixed" class="thFixed"> 
                    <td class="col1">Col 1</td> 
                    <td class="col2">Col 2</td> 
                    <td class="col3">Col 3</td> 
                    <td class="col4">Col 4</td> 
                    <td class="col5">Col 5</td> 
                    <td class="col6">Col 6</td> 
                </tr> 
                <tr> 
                    <td class="col1">cell</td> 
                    <td class="col2">cell</td> 
                    <td class="col3">cell</td> 
                    <td class="col4">cell</td> 
                    <td class="col5">cell</td> 
                    <td class="col6">cell</td> 
                </tr> 
                    <tr> 
                    <td class="col1">cell</td> 
                    <td class="col2">cell</td> 
                    <td class="col3">cell</td> 
                    <td class="col4">cell</td> 
                    <td class="col5">cell</td> 
                    <td class="col6">cell</td> 
                </tr> 
                    <tr> 
                    <td class="col1">cell</td> 
                    <td class="col2">cell</td> 
                    <td class="col3">cell</td> 
                    <td class="col4">cell</td> 
                    <td class="col5">cell</td> 
                    <td class="col6">cell</td> 
                </tr>     <tr> 
                    <td class="col1">cell</td> 
                    <td class="col2">cell</td> 
                    <td class="col3">cell</td> 
                    <td class="col4">cell</td> 
                   ...

CSS

/* make sure thSpecial is first */
#thFixed {
    top: 0;
}
/* these are not necessary for the fixed functionality */
body {
    font-family: Arial;
    font-size: .9em;
    padding: 25px;
}
table {   
    border-collapse: collapse;
}
td {
    border: 1px solid #e0e0e0;
}
.hot {
    color: #ff1e25;
    background: #f8fecc;
}
.thFixed td {   
    color: #ffffff;
    background: #999999;
}

/* these are necessary for fixed functionality */

.maskHolder,
.fixedTable,
.theTable,
.theTable table {
	position: relative;
}

.mask,
tr.thFixed {  
    position: absolute;
}

.fixedTableHolder,
.maskHolder,
.mask,
.theTable table,
.theTable tbody,
.theTable tr {
    width: 100%;
}

.maskHolder {
	z-index: 100;
}
tr.thFixed,
.mask {
    top: 0;
    left: 0;
}
.theTable table,
.theTable tbody,
.theTable tr,
.theTable tr.thFixed {
	display: block;
}

.fixedTableHolder {
    display: inline-block;
}

.theTable table {
    /* height of the header row, or your first row will be behind it */
	padding-top: 3em;
}

.mask {   
    background: #ffffff;
    height: 1px;
}

/* td widths */
.theTable td.col1 {
    width: 10% !important;
}
.theTable td.col2 {
    width: 15% !important;
}
.theTable td.col3 {
    width: 25% !important;
}
.theTable td.col4 {
    width: 10% !important;
}
.theTable td.col5,
.theTable td.col6 {
    width: 20%em !important;
}

JavaScript

// get table width and match the mask width
function setMaskWidth() { 
    if (document.getElementById('mask') !==null) {
        var tableWidth = document.getElementById('theTable').offsetWidth;
        // match elements to the table width
        document.getElementById('mask').style.width = tableWidth + "px";
     }
}

function fixTop() {
    // get height of page content 
    function getScrollY() {
        var y = 0;
        if( typeof ( window.pageYOffset ) == 'number' ) {
            y = window.pageYOffset;
        } else if ( document.body && ( document.body.scrollTop) ) {
            y = document.body.scrollTop;
        } else if ( document.documentElement && ( document.documentElement.scrollTop) ) {
            y = document.documentElement.scrollTop;
        }
        return [y];
    }  
    
    var y = getScrollY();
    var y = y[0];
    
    if (document.getElementById('mask') !==null) {
        document.getElementById('mask').style.height = y + "px" ;
        
        if (document.all && document.querySelector && !document.addEventListener) {
            document.styleSheets[1].rules[0].style.top = y + "px" ;
        } else {
            document.styleSheets[1].cssRules[0].style.top = y + "px" ;
        }
    }
    
}

window.onscroll = function() {
    setMaskWidth();
    fixTop();
}