HTML 表格的列滚动

Question

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

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

这是一个演示 jsFiddle http://jsfiddle.net/8aaZZ/在这个 fiddle 里我想制作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;
}