Drag and Drop a Locked Column
(Internet Explorer-only CSS solution)

Name Major Sex English Japanese Math Geometry
Name01 lang male 80 70 75 80
Name02 math male 90 88 100 90
Name03 lang female 85 95 80 90
Name04 lang male 60 55 100 90
Name05 lang female 68 80 95 95
Name06 math male 100 99 100 100
Name07 math male 85 68 90 90
Name08 lang male 100 90 90 90
Name09 math male 80 50 65 65
Name10 lang male 85 100 100 100
Name11 lang male 86 85 100 100
Name12 math female 100 75 70 70
Name13 lang female 100 80 100 90
Name14 lang female 50 45 55 55
Name15 lang male 95 35 100 100
Name16 lang female 100 50 30 30
Name17 lang female 80 100 55 95
Name18 math male 30 49 55 85
Name19 lang male 68 90 88 88
Name20 math male 40 45 40 90
Name21 lang male 10 15 100 60
Name22 math male 100 99 100 80
Name23 lang female 85 80 80 80

This table has a non-scrolling header with the option to create a locked column for horizontal scrolling.

In addition, a behavior has been added to the table through the style sheet that allows dragging columns with the mouse. The user can now lock any column by moving it to the first position.

The column locking is accomplished entirely by means of CSS styling which can be applied by a static assignment of a CSS class to the cells of the locked column, or in this case, by dynamically toggling the class upon user action.

Unfortunately, the drag/drop column behavior does not work with data binding techniques.

CSS-only solution