表格中表头要固定住，但是表格中的数据要可以用滚动条查看

用两个table把
把下面的放到一个div设置滚动条

解决方案 »

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

以前别人问的时候写的一个
看看行不行。。
<script>
function window.onload(){
var tr=document.getElementById("tab").getElementsByTagName("tr")
var num=0
for(var i=0;i<6;i++)
{num =parseInt(tr[i].offsetHeight)+num}
document.getElementById("all").style.height=numvar td=document.getElementById("tab").getElementsByTagName("tr")[0].getElementsByTagName("td")
var titletd=document.getElementById("tab1").getElementsByTagName("tr")[0].getElementsByTagName("td")
for(var j=0;j<td.length;j++)
{titletd[j].style.width=td[j].offsetWidth}}
</script>
<div  style="width:300px;border:1px solid #999999">
<div id="title" style="width:300px;">
<table width="280" border="0" cellspacing="0" cellpadding="0" id="tab1">
<tr><td>
id
</td>
  <td>标题</td>
  <td>内容</td>
</tr>
</table>
</div>
<div id="all" style=" overflow: scroll; width:300px; " >
<table width="280" border="0" cellspacing="0" cellpadding="0" id="tab">
  <tr>
    <td  >1</td>
    <td  >aaaa</td>
    <td  >a</td>
  </tr>
  <tr>
    <td >2</td>
    <td >bbbb</td>
    <td >bbbbb</td>
  </tr>
  <tr>
    <td >3</td>
    <td > </td>
    <td > </td>
  </tr>
  <tr>
    <td >4</td>
    <td > </td>
    <td > </td>
  </tr>
  <tr>
    <td>5</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td >6</td>
    <td > </td>
    <td > </td>
  </tr>
  <tr>
    <td>7</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>8</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>9</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>10</td>
    <td> </td>
    <td> </td>
  </tr>
</table>
</div>
</div>
wtcsy写的，如果把其中的一个td，改成特别多的字符例如：
...
<tr>
    <td  >1</td>
    <td  >aaassssssssssssssssssssssssssssssssssssssssssssssssssssssa</td>
    <td  >a</td>
  </tr>
...这样表格不久撑开了吗，样子还是对不齐的啊
用div或者img来模拟滚动条.
拖动滚动条的时候,
用代码动态改变table中的内容.
横向滚动条简单呀，
直接放到div中，
用div的横向滚动条就可以了呀。
当然自己做会麻烦些。
以前做过一个用于查询字体的表格,就是这种风格的.可以去看看,很有实用性的.
http://blog.csdn.net/cuckoo1/archive/2008/11/20/3339940.aspx
div+css+GridView就可以满足你的要求了
通过css来控制div<style>
   .DivForMoreHeader
    {
         border:#EFEDED 1px solid;
         overflow-y:scroll;
         width:80%;
         heigth:400px;
         background-color:transparent;
    }
</style>
aspx代码：...
   <div class="DivForMoreHeader" >
      <asp:GirdView .... >
         ....
     </asp:GridView>

   </div>
上面的CSS和DIV相互作用配合，即使多行标头也是OK的，即标头不会随纵向滚动条的移动也没有，标头会始终出现的。
不好意思，还得加个CSS
通过css来控制div <style>
  .DivForMoreHeader
    {
        border:#EFEDED 1px solid;
        overflow-y:scroll;
        width:80%;
        heigth:400px;
        background-color:transparent;
    }
   th { position:relative;}
</style>
aspx代码： ...
  <div class="DivForMoreHeader" >
      <asp:GirdView .... >
        ....
    </asp:GridView>   </div>
對齊問題，可以用javascript來控制呀！
<script>
function bodyScrl(){
divHead.scrollLeft = divBody.scrollLeft;
}
function rs(){
Headtable.width = Bodytable.offsetWidth;
for(var i=0; i<Headtable.rows(0).cells.length; i++){
  Headtable.rows(0).cells(i).width=Bodytable.rows(0).cells(i).offsetWidth;
}
}
</script>
<body onresize="rs()" onload="rs()"  style="margin-left:0px;margin-top:0px;overflow:hidden"><div style="overflow:hidden;position:absolute;z-index:1;height:25px;width:expression(document.body.clientWidth-25)" id="divHead">
<table border=1 cellspacing=0 cellpadding=0 id=Headtable bgcolor="#00FFFF" style="border-collapse: collapse" height="25px" bordercolor="#111111">
<tr>
<td norap id="td1">a1</td>
<td norap>a2</td>
<td norap>a3</td>
<td norap>a4</td>
<td norap>a5</td>
<td norap>a6</td>
</tr>
</table>
</div>
<div style="overflow:scroll;position:absolute;z-index:0;height:expression(document.body.clientHeight-this.offsetTop);width:100%}" id="divBody" onscroll="bodySc()">
<table border="1" cellspacing=0 cellpadding=0 id="Bodytable" width=100% height=888 bgcolor="#C0C0C0" bordercolor="#111111" style="border-collapse: collapse">
<tr height="24px">
<td norap id="td1">a1</td>
<td norap>a2</td>
<td norap>a3</td>
<td norap>a4</td>
<td norap>a5</td>
<td norap>a6</td>
</tr>
<tr>
<td>1</td>
<td>abc</td>
<td>abc</td>
<td>abc</td>
<td>abc</td>
<td>abc</td>
</tr>
.....
</table>
</div>
</body>
</html>