如何实现不受滚动影响的图层或表格呢？

<table width="150%" height="80" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="20%">产品/属性</td>
    <td width="20%">所属车系</td>
    <td width="20%">年款</td>
    <td width="20%">指导价格(万元)</td>
    <td width="20%">综合油耗(L)</td>
  </tr>
  <tr>
    <td>两厢 1.4 SX EMT优逸版 2010款</td>
    <td>上海通用雪佛兰</td>
    <td>2010</td>
    <td>6.31</td>
    <td>6.4</td>
  </tr>
  <tr>
    <td>两厢 1.2 SL 手动温馨版 2010款</td>
    <td>上海通用雪佛兰</td>
    <td>2010</td>
    <td>6.83</td>
    <td>7.0</td>
  </tr>
</table>如上述代码，由于表格横向比较长的，在这里我只是列出了几列，如实际上是有20列的，这样的话，会在下面有滚动条，那么拉动下面滚动条后，第一列（产品/属性）就看不到了，
如何实现让第一列（产品/属性）固定在左边，不受下面滚动条拖动而看不见呢？
高人们，有什么方法可以实现上面的要求呢？用DIV，SPAN都可以，只要能实现即可。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

http://www.xker.com/page/e2007/0116/10705.html
JavaScript实现的数据表格：冻结列、调整列宽和客户端排序
这个也太复杂了,而且不用要求那么高的.有没有别的呀?
效果可以看下http://data.auto.qq.com/car_serial/55/modelscompare.shtml的,当拉动下面的滚动条时,左边的：
基本参数
车款名：
所属品牌：
所属车系：
年款：
生产状态：
指导价格
……
这一列依然在左边的，并没有看不见的。
建议在左边做个固定层
  用position:fixed固定位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type='text/css'>
body{
width:140px;
height:200px;
margin:160px auto;
}
</style>
</head>
<body>
<div>
<div style="overflow:auto;height:209px;width:140px;position:relative;border-bottom:1px solid #333" id="tb">
<table border="1" id="tbl"><tr><td colspan=2 style="width:114px;">sdfsdfdf</td></tr><tr><td>sdfsdfs1</td><td><img src='images/close.gif' /></td></tr><tr><td>sdfsdfs2</td><td><img src='images/close.gif' /></td></tr><tr><td>sdfsdfs3</td><td><img src='images/close.gif' /></td></tr><tr><td>sdfsdfs4</td><td><img src='images/close.gif' /></td></tr><tr><td>sdfsdfs5</td><td><img src='images/close.gif' /></td></tr><tr><td>sdfsdfs6</td><td><img src='images/close.gif' /></td></tr><tr><td>sdfsdfs7</td><td><img src='images/close.gif' /></td></tr><tr><td>sdfsdfs8</td><td><img src='images/close.gif' /></td></tr><tr><td>sdfsdfs9</td><td><img src='images/close.gif' /></td></tr><tr><td>sdfsdf10</td><td><img src='images/close.gif' /></td></tr><tr><td>sdfsdf11</td><td><img src='images/close.gif' /></td></tr><tr><td>sdfsdf12</td><td><img src='images/close.gif' /></td></tr></table>
</div>
<table border="1" id="aaa" style="position:absolute;top:160px;background:#ffffff;"><tr><td colspan=2 style="width:114px">sdfsdfdf</td></tr></table>
</div>
</body>
</html>
<script type='text/javascript'>onload = init;
function init(){
var imgs = document.getElementById("tb").getElementsByTagName("img");
  for(var i=0;i<imgs.length;i++){
    imgs[i].onclick = changeSp;
  }
}
function changeSp(){
  if(this.flg){
    this.flg = false;
    this.src = "images/close.gif";
  }else{
    this.flg = true;
    this.src = "images/open.gif";
  }
  var imgs = document.getElementById("tb").getElementsByTagName("img");
  for(var i=0;i<imgs.length;i++){
    if(!imgs[i].flg){
      document.getElementById("tbl").tBodies[0].insertBefore(this.parentNode.parentNode, imgs[i].parentNode.parentNode);
      break;
    }
    imgs[i].onclick = changeSp;
  }
  updataSld();
}
function updataSld(){
  var imgs = document.getElementById("tb").getElementsByTagName("img");
  document.getElementById("aaa").tBodies[0].innerText ?  document.getElementById("aaa").tBodies[0].innerText= "" :document.getElementById("aaa").tBodies[0].innerHTML ="";
  var tr0 = document.getElementById("tbl").tBodies[0].rows[0].cloneNode(true);
  tr0.style.background = "#ffffff";
  document.getElementById("aaa").tBodies[0].appendChild(tr0);
  for(var i=0;i<imgs.length;i++){
    if(imgs[i].flg){
      var a = imgs[i].parentNode.parentNode.cloneNode(true);
      a.value = imgs[i];
      document.getElementById("aaa").tBodies[0].appendChild(a);
      a.lastChild.firstChild.onclick=(function(a){
        return function(){
          var j=0;
          a.value.src = "images/close.gif";
          a.value.flg = false;
          document.getElementById("aaa").tBodies[0].removeChild(a);
          var imgs = document.getElementById("tb").getElementsByTagName("img");
          for(var i=0;i<imgs.length;i++){
            if(imgs[i].flg){
               j++;
            }
          }
          document.getElementById("tbl").tBodies[0].insertBefore(a.value.parentNode.parentNode, imgs[j+1].parentNode.parentNode);
        }
      })(a);
    }
  }
}
</script>
写了一个，你看看合适吗