HTML Table's columns scrolling

Question

I have an html table inside a Div and here is the screenshot

the table is in a <div></div> right now with overflow x and y :auto but in this way it scrolls the whole table what i want to do is to fix the Sheet1 column and allow other columns to scroll how can i do this ?

Here is a demo jsFiddle http://jsfiddle.net/8aaZZ/ in this fiddle i want to make Fields column fixed and Records columns to be scrolled horizontally..

Answer 1

by giving position:absolute to first column you can achieve the effect.

HERE is a DEMO.

.table-data
{
  background:#f6f6f6;
  overflow-x:scroll;  
  overflow-y:visible;
  margin-left:5em; 
  width: 60%; 
}

table{border-collapse:separate; table-layout:fixed;}

table th td{padding:5px;  width:100px;}
table td{border:1px solid gray;}

table td:not(:first-child)
{background:#f6f6f6;overflow-x:scroll;  }

table td:not(:first-child):hover
{background:red;overflow-x:scroll;}

table td:first-child, table th:first-child{ 
  position:absolute; 
  width:5em;
  left:0;
  top:auto;
  background:cyan;
}