HTML表的列滚动

Question

我在Div中有一个html表，这是截图

该表现在位于<div></div>，overflow x和y :auto 但是这样它会滚动整个表格 我想要做的是修复Sheet1列并允许其他列滚动我该怎么做？

这是一个演示jsFiddle http://jsfiddle.net/8aaZZ/在这个小提琴我想让Fields列固定，Records列水平滚动..

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;
}