<html>
<head>
<title>Some Title</title>
<style>
<!--
table {
border-collapse : collapse;
table-layout : fixed;
}
td, th {
background-color: #aaaaaa;
border-right : 1px solid #ffffff;
color : #ffffff;
width : 100px;
text-align : center;
}
td.locked_left, th.locked_left {
background-color: #88ff88;
font-weight : bold;
left : expression(document.getElementById('table_container').scrollLeft);
border-left : 1px solid #ffffff;
position : relative;
z-index : 1
}
#table_container {
width : 300px;
overflow : scroll;
}
-->
</style>
</head>
<body>
<div id='table_container'>
<table>
<thead>
<tr>
<th class='locked_left'>Number</th>
<th >English</th>
<th >French </th>
<th >German </th>
</tr>
</thead>
<tbody>
<tr>
<td class='locked_left'>1</td>
<td >one</td>
<td >un</td>
<td >eins</td>
</tr>
<tr>
<td class='locked_left'>2</td>
<td >two</td>
<td >deux</td>
<td >zwei</td>
</tr>
<tr>
<td class='locked_left'>3</td>
<td >three</td>
<td >trois</td>
<td >drei</td>
</tr>
<tr>
<td class='locked_left'>4</td>
<td >four</td>
<td >quattre</td>
<td >vier</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>