如何锁定表格第一行,类似EXCEL锁表格效果?

<table width="400" border="1" cellspacing="0" cellpadding="0">
  <tr align="center">
    <td height="36">A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td height="80" colspan="5">
<div style=" width:100%; height:80px;overflow:scroll;overflow-x:hidden">
<table width="100%"  border="1" cellspacing="0" cellpadding="3">
      <tr align="center">
        <td width="19%">A1</td>
        <td width="19%">B1</td>
        <td width="19%">C1</td>
        <td width="19%">D1</td>
        <td width="19%">E1</td>
        </tr>
      <tr align="center">
        <td width="20%">A2</td>
        <td width="20%">B3</td>
        <td width="20%">AA</td>
        <td width="20%">&nbsp;</td>
        <td width="20%">&nbsp;</td>
        </tr>
      <tr align="center">
        <td width="20%">A2</td>
        <td width="20%">B3</td>
        <td width="20%">AA</td>
        <td width="20%">&nbsp;</td>
        <td width="20%">&nbsp;</td>
        </tr>
      <tr align="center">
        <td width="20%">A2</td>
        <td width="20%">B3</td>
        <td width="20%">AA</td>
        <td width="20%">&nbsp;</td>
        <td width="20%">&nbsp;</td>
        </tr>
      <tr align="center">
        <td width="20%">A2</td>
        <td width="20%">B3</td>
        <td width="20%">AA</td>
        <td width="20%">&nbsp;</td>
        <td width="20%">&nbsp;</td>
        </tr>
      <tr align="center">
        <td width="20%">A2</td>
        <td width="20%">B3</td>
        <td width="20%">AA</td>
        <td width="20%">&nbsp;</td>
        <td width="20%">&nbsp;</td>
        </tr>
      <tr align="center">
        <td width="20%">A2</td>
        <td width="20%">B3</td>
        <td width="20%">AA</td>
        <td width="20%">&nbsp;</td>
        <td width="20%">&nbsp;</td>
        </tr>
      <tr align="center">
        <td width="20%">A2</td>
        <td width="20%">B3</td>
        <td width="20%">AA</td>
        <td width="20%">&nbsp;</td>
        <td width="20%">&nbsp;</td>
        </tr>
      <tr align="center">
        <td width="20%">A3</td>
        <td width="20%">&nbsp;</td>
        <td width="20%">FE</td>
        <td width="20%">&nbsp;</td>
        <td width="20%">&nbsp;</td>
        </tr>
      <tr align="center">
        <td width="20%">A4</td>
        <td width="20%">&nbsp;</td>
        <td width="20%">&nbsp;</td>
        <td width="20%">53</td>
        <td width="20%">EE</td>
        </tr>
      <tr align="center">
        <td width="20%">A5</td>
        <td width="20%">&nbsp;</td>
        <td width="20%">&nbsp;</td>
        <td width="20%">&nbsp;</td>
        <td width="20%">&nbsp;</td>
        </tr>
      <tr align="center">
        <td width="20%">A6</td>
        <td width="20%">&nbsp;</td>
        <td width="20%">FF</td>
        <td width="20%">&nbsp;</td>
        <td width="20%">&nbsp;</td>
        </tr>
      <tr align="center">
        <td width="20%">A7</td>
        <td width="20%">AAA</td>
        <td width="20%">&nbsp;</td>
        <td width="20%">tyq</td>
        <td width="20%">FF</td>
        </tr>
      <tr align="center">
        <td width="20%">A8</td>
        <td width="20%">&nbsp;</td>
        <td width="20%">&nbsp;</td>
        <td width="20%">&nbsp;</td>
        <td width="20%">&nbsp;</td>
        </tr>
    </table>
</div></td>
  </tr>
</table>接分啰,接分啰!

解决方案 »

  1.   

    我一般是把表头的html代码提取出来然后再生成一个浮动的表头，跟着滚动条浮动
      

  2.   

    按goocity(健) 的方法测试,上下表格很难对齐排列。郁闷中.....
      

  3.   

    <table width="400" border="1" cellspacing="0" cellpadding="0">
      <tr align="center">
        <td height="36">A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
      </tr>
      <tr>
        <td height="80" colspan="5">
    <div style="position:absolute; width:416px; height:80px; overflow:scroll; overflow-x:hidden; left: 10px; top: 54px;" onload="">
    <table width="100%"  border="1" cellspacing="0" cellpadding="3">
          <tr align="center">
            <td width="19%">A1</td>
            <td width="19%">B1</td>
            <td width="19%">C1</td>
            <td width="19%">D1</td>
            <td width="19%">E1</td>
            <td>&nbsp;</td>
          </tr>
          <tr align="center">
            <td width="20%">A2</td>
            <td width="20%">B3</td>
            <td width="20%">AA</td>
            <td width="20%">&nbsp;</td>
            <td width="20%">&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr align="center">
            <td width="20%">A2</td>
            <td width="20%">B3</td>
            <td width="20%">AA</td>
            <td width="20%">&nbsp;</td>
            <td width="20%">&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr align="center">
            <td width="20%">A2</td>
            <td width="20%">B3</td>
            <td width="20%">AA</td>
            <td width="20%">&nbsp;</td>
            <td width="20%">&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr align="center">
            <td width="20%">A2</td>
            <td width="20%">B3</td>
            <td width="20%">AA</td>
            <td width="20%">&nbsp;</td>
            <td width="20%">&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr align="center">
            <td width="20%">A2</td>
            <td width="20%">B3</td>
            <td width="20%">AA</td>
            <td width="20%">&nbsp;</td>
            <td width="20%">&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr align="center">
            <td width="20%">A2</td>
            <td width="20%">B3</td>
            <td width="20%">AA</td>
            <td width="20%">&nbsp;</td>
            <td width="20%">&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr align="center">
            <td width="20%">A2</td>
            <td width="20%">B3</td>
            <td width="20%">AA</td>
            <td width="20%">&nbsp;</td>
            <td width="20%">&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr align="center">
            <td width="20%">A3</td>
            <td width="20%">&nbsp;</td>
            <td width="20%">FE</td>
            <td width="20%">&nbsp;</td>
            <td width="20%">&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr align="center">
            <td width="20%">A4</td>
            <td width="20%">&nbsp;</td>
            <td width="20%">&nbsp;</td>
            <td width="20%">53</td>
            <td width="20%">EE</td>
            <td>&nbsp;</td>
          </tr>
          <tr align="center">
            <td width="20%">A5</td>
            <td width="20%">&nbsp;</td>
            <td width="20%">&nbsp;</td>
            <td width="20%">&nbsp;</td>
            <td width="20%">&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr align="center">
            <td width="20%">A6</td>
            <td width="20%">&nbsp;</td>
            <td width="20%">FF</td>
            <td width="20%">&nbsp;</td>
            <td width="20%">&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr align="center">
            <td width="20%">A7</td>
            <td width="20%">AAA</td>
            <td width="20%">&nbsp;</td>
            <td width="20%">tyq</td>
            <td width="20%">FF</td>
            <td>&nbsp;</td>
          </tr>
          <tr align="center">
            <td width="20%">A8</td>
            <td width="20%">&nbsp;</td>
            <td width="20%">&nbsp;</td>
            <td width="20%">&nbsp;</td>
            <td width="20%">&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table>
    </div></td>
      </tr>
    </table>刚才没对齐了...现在对齐了呀
    如果是少于其高度的话,表格的滚动条会不见了耶~
    再接分再接分
      

  4.   

    固定首行
    http://jkisjk.vip.sina.com/html/fixHeadTr2.htm固定首行首列
    http://jkisjk.vip.sina.com/html/fixHeadTr3.htm
      

  5.   

    JK_10000(JK)的方法很有效，谢谢大家！