After searching in the Internet, it turns our that it is very easy to do with CSS. No JavaScript is required. HTML is amazing.
Below is the sample page that I have done it myself while referencing the tutorial of fixed column.
- "fixed_div" - this is the main container for the table.
- "scroller" - this is the container that limit the width (width:600px) of the table to be displayed on the screen so that the horizontal scrollbar is scrollable. While "margin-left:100px" will ident the div to 100px to the right. Without this attribute the horizontal scrollbar will start showing at left = 0.
- "table" - the table-layout must be "fixed" or else the cell might be shrunken.
- "th" - the "position:absolute" will mark the cell to be fixed (non-scrollable) and "left:0" will let it stick to the left.
<html>
<head>
<style type="text/css">
table{
table-layout:fixed;
width:100%;
}
th {
width: 100px;
position: absolute;
left:0;
background-color:yellow;
}
td {
width: 300px;background-color:yellow;
}
.scroller {
overflow-x: scroll;
overflow-y: visible;
width: 600px;
margin-left: 100px;
}
.fixed_div {
position: relative;
}
</style>
</head>
<body>
<div class="fixed_div">
<div class="scroller">
<table>
<tr>
<th>
header 1
</th>
<td>
cell 11
</td>
<td>
cell 12
</td>
<td>
cell 13
</td>
<td>
cell 14
</td>
<td>
cell 15
</td>
</tr>
<tr>
<th>
header 2
</th>
<td>
cell 21
</td>
<td>
cell 22
</td>
<td>
cell 23
</td>
<td>
cell 24
</td>
<td>
cell 25
</td>
</tr>
<tr>
<th>
header 3
</th>
<td>
cell 31
</td>
<td>
cell 32
</td>
<td>
cell 33
</td>
<td>
cell 34
</td>
<td>
cell 35
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
