how to freeze vertical row in the HTML table

I think this is a nice way from http://handsontable.com/demo/fixed.html.  I updated the code for keeping one column fixed and not the header http://jsfiddle.net/kjesyyx3/

HTML

<h2>Fixed rows and columns</h2>

<p>Specify two fixed rows with <code>fixedRowsTop: 2</code> and two fixed columns with <code>fixedColumnsLeft:
  2</code> option.</p>

<p>Note: You'll need horizontal scrollbars, so just set a container <code>width</code> and <code>overflow:
  scroll</code> in CSS.</p>

<pre id="positions">rowOffset: 81</pre>

<div id="example1" style="width: 400px; height: 300px; overflow: scroll" data-originalstyle="width: 400px; height: 300px; overflow: scroll" class="handsontable"></div>

<p>
  <button name="dump" data-instance="hot" data-dump="#example1" title="Prints current data source to Firebug/Chrome Dev Tools">
    Dump data to console
  </button>
</p>

Select allOpen in new window

JS  NOTE:  fixedColumnsLeft: 1,

$(document).ready(function () {

  /**
   * Container looks like this:
   *
   * <div id="example1" style="width: 400px; height: 300px; overflow: scroll"></div>
   */
  var myData = Handsontable.helper.createSpreadsheetData(1000, 100),
    container = document.getElementById('example1'),
    positions = document.getElementById('positions'),
    hot;
  
  hot = new Handsontable(container, {
    data: myData,
    colWidths: [65, 47, 47, 47, 47, 47, 47, 47, 47, 47],
    rowHeaders: true,
    colHeaders: true,
    fixedRowsTop: 0,
    fixedColumnsLeft: 1,
    contextMenu: true
  });
  
  setInterval(function () {
    var str = '';
  
    str += 'rowOffset: ' + hot.rowOffset();
  
    positions.innerHTML = str;
  }, 100);
  
  function bindDumpButton() {
  
      Handsontable.Dom.addEvent(document.body, 'click', function (e) {
  
        var element = e.target || e.srcElement;
  
        if (element.nodeName == "BUTTON" && element.name == 'dump') {
          var name = element.getAttribute('data-dump');
          var instance = element.getAttribute('data-instance');
          var hot = window[instance];
          console.log('data of ' + name, hot.getData());
        }
      });
    }
  bindDumpButton();

});

Select allOpen in new window

HTML

<h2>Fixed rows and columns</h2>

<p>Specify two fixed rows with <code>fixedRowsTop: 2</code> and two fixed columns with <code>fixedColumnsLeft:
  2</code> option.</p>

<p>Note: You'll need horizontal scrollbars, so just set a container <code>width</code> and <code>overflow:
  scroll</code> in CSS.</p>

<pre id="positions">rowOffset: 81</pre>

<div id="example1" style="width: 400px; height: 300px; overflow: scroll" data-originalstyle="width: 400px; height: 300px; overflow: scroll" class="handsontable"></div>

<p>
  <button name="dump" data-instance="hot" data-dump="#example1" title="Prints current data source to Firebug/Chrome Dev Tools">
    Dump data to console
  </button>
</p>

Select allOpen in new window

CSS

</style><!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="http://handsontable.com/dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http://handsontable.com/dist/handsontable.full.css">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331">

<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}

Select allOpen in new window

how can i do this for <div>Some Page Content </div>
    <table border=1>
            <thead>
                <tr>
                    <th>Head1</th>
                    <th>Head2</th>
                    <th>Head3</th>
                </tr>
            </thead>
    </table>
    <div style="max-height: 200px; overflow: auto;">
        <table id="test" border=1>
            <tbody>
                <tr> <td>content</td> <td>content</td> <td>content</td><td>content</td> <td>content</td> <td>content</td><td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td><td>content</td> <td>content</td> <td>content</td><td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td><td>content</td> <td>content</td> <td>content</td><td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td><td>content</td> <td>content</td> <td>content</td><td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td><td>content</td> <td>content</td> <td>content</td><td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td><td>content</td> <td>content</td> <td>content</td><td>content</td> <td>content</td> <td>content</td> </tr> <tr> <td>content</td> <td>content</td> <td>content</td><td>content</td> <td>content</td> <td>content</td><td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td><td>content</td> <td>content</td> <td>content</td><td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td><td>content</td> <td>content</td> <td>content</td><td>content</td> <td>content</td> <td>content</td> </tr>
            </tbody>
        </table>
    </div>
<div>Some Page Content </div>