tbody {overflow=auto;width: 100%; height: 200px}

...
<link rel="stylesheet" href="test.css" type="text/css">

<script type="text/javascript">
function lockCol(tblID) {

 var table = document.getElementById(tblID);
 var button = document.getElementById('toggle');
 var cTR = table.getElementsByTagName('TR');  //collection of rows

 if (table.rows[0].cells[0].className == '') {
  for (i = 0; i < cTR.length; i++)
   {
   var tr = cTR.item(i);
   tr.cells[0].className = 'locked'
   }
  button.innerText = "Unlock First Column";
  }
  else {
  for (i = 0; i < cTR.length; i++)
   {
   var tr = cTR.item(i);
   tr.cells[0].className = ''
   }
  button.innerText = "Lock First Column";
  }
}
</script>

<button onClick="lockCol('tbl')"  id="toggle">Lock First Column</button>

<div id="tbl-container">

<table id="tbl">
<thead>
...
</thead>

<tbody>
...
</tbody>
</table>

<div>

...
div#tbl-container {
width: 418px;
height: 252px;
overflow: auto;
}

table {
table-layout: fixed;
border-collapse: collapse;
}

div#tbl-container table th {
width: 100px;
}

thead th, thead th.locked {
font-weight: bold;
text-align: center;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
}
 
thead th {
top: expression(document.getElementById("tbl-container").scrollTop-2); /*IE5+ only*/
z-index: 20;
}

thead th.locked {z-index: 30;}

td.locked,  th.locked{
border-right: 1px solid silver;
left: expression(document.getElementById("tbl-container").scrollLeft); /*IE5+ only*/
position: relative;
z-index: 10;
}

td {
padding: 2px 5px 2px 2px;
font-size: 12px;
border-left: 1px solid silver;
border-bottom: 1px solid silver;
}
...