HTML table column freeze

Hello everyone, do any one has idea on how to implement freeze of HTML table column. I am working on this for past 2 days but i do not get any idea on how to implement this. Please suggest me how to approch

Thanks in advance

 

You will have to make use of the CSS position: fixed; property.

But there will be much more to do to get it to be fully readable.

You could use Javascript also, but that can get more complicated then this way.

 

If i use fixed and if i move the scroll then the columns next to it should be hidden. I want to support feature same as microsoft excel freeze

 

The fixed column (the first td in each tr) will be above the columns when you scroll and stay at the start of table.

Make sure you put a background color on the fixed TD's or it will not be readable. Also, you will need to position the fixed TD away from the other TD's as it will cover the second column.

<table>
<tr>
<td style="position: fixed;">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td style="position: fixed;">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>

Code (markup):