document.getElementById('theTable').addEventListener('scroll', scrollHeader);
function scrollHeader(e){
var table = e.currentTarget,
thead = table.getElementsByTagName('thead')[0];
thead.scrollLeft = table.scrollLeft;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:15px;
background:#eaebec;
border:#ccc 1px solid;
border-radius:3px;
border-collapse:collapse; border-spacing: 0;
box-shadow: 0 1px 2px #d1d1d1;
display: block;
overflow: auto;
max-height: 200px;
width:425px;
}
table thead {
z-index: 1; /* put on top of other rows */
display: block;
position: fixed;
/* make sure this header width is same as table */
max-width: 500px;
overflow-y: auto; /* use auto so scrollbars only appear if they need to*/
overflow-x: hidden;
}
thead tr td {
background: #eaebec;
width: 65px;
min-width: 65px;
}
table tbody {
display: block;
padding-top: 40px;
}
table th {
padding:2px 2px 2px 2px;
border-top:0;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #ededed;
}
table tr {
text-align: center;
}
/* only using !important to override your styles below */
table td {
margin-left: 0 !important;
width: 65px !important;
padding:2px 2px 2px 2px;
border-top:0;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
}
table tr:hover td {
background: #F7FE2E;
}
table tr, table td {
width: 65px;
min-width: 65px;
}
<div id='container'>
<div id='content'><h3><font color='blue'>Listview - MP</font></h3>
<div id='wrapper'>
<table id="theTable"><thead><tr><td>Julian Date</td>
<td>Records</td>
<td>Sales</td>
<td>CPO</td>
<td>2006 Records</td>
<td>2006 Deals</td>
</tr></thead>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
<tr><td>229</td><td>39784</td><td>0</td><td>10,542.76</td><td>0</td><td>39784</td></tr>
</table></div></div></div>