HTML表的colums滾動

Question

我有一個div內部的HTML表格，這裏是截圖

表處於<div></div>現在有overflow x和y:auto 但這種方式滾動整個表 我想要做的是修復Sheet1列，並允許其他列滾動我怎麼能做到這一點？

以下是這撥弄我要讓Fields列固定和Records列水平滾動演示的jsfiddle http://jsfiddle.net/8aaZZ/ ..

Answer 1

給予position:absolute過第一欄就可以達到的效果。

這是一個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; 
}