<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>锁定表格头并实现表头与下面宽度动态对齐</title>
<script language="JavaScript">
    window.onload =function(){localFristTab();}
    function localFristTab(){
        for(var i=0;i<7;i++){
            document.getElementById("table1").rows[0].cells[i].style.width=document.getElementById("table2").rows[0].cells[i].offsetWidth+"px";
        }
    }
</script>

</head>
<body>
        <!--要锁定的表头-->
        <table id="table1" width="824"  border="0" cellspacing="0" cellpadding="0" >
              <tr >
                <td >Book Name</td>
                <td>Level</td>
                <td>Reading Score</td>
                <td>Reading Progress(%)</td>
                <td>Quiz Score</td>
                <td>Quiz Progress(%)</td>
                <td>Date</td>
              </tr>
        </table>
    <div id="tabDiv" style="position:relative;overflow:hidden;height:200px;width:845px;overflow-y:scroll">
        <table  id="table2" width="824" border="0" cellspacing="0" cellpadding="0" >
          <tr>
            <td>
            <p style="margin-top:5px;">The Hill</p>
            </td>
            <td>A</td>
            <td>
            0            
            </td>
            <td>
            25%
            </td>
            <td>2014/12/05</td>
            <td>2014/12/05</td>
            <td>2014/12/05</td>
            
          </tr>          
          <tr>
              
            <td><img style="margin-top:15px;" src="img/book_p_w_picpath.png" width="89" height="94" />
            <p style="margin-top:5px;">A Parrot for Pam</p>
            </td>
            <td>A</td>
            <td>
            0            
            </td>
            <td>
            25%
            </td>
            <td>2014/12/05</td>
            <td>2014/12/05</td>
            <td>2014/12/05</td>
            
          </tr>
          <tr>
              
            <td>
            <p style="margin-top:5px;">So Many Scoops!</p>
            </td>
            <td>A</td>
            <td>
            0            
            </td>
            <td>
            25%
            </td>
            <td>2014/12/05</td>
            <td>2014/12/05</td>
            <td>2014/12/05</td>
            
          </tr>
          <tr>
              
            <td><img style="margin-top:15px;" src="img/book_p_w_picpath.png" width="89" height="94" />
            <p style="margin-top:5px;">School Is Cool!</p>
            </td>
            <td>A</td>
            <td>
            0            
            </td>
            <td>
            25%
            </td>
            <td>2014/12/05d</td>
            <td>2014/12/05</td>
            <td>2014/12/05</td>
            
          </tr>
          <tr>
              
            <td><img style="margin-top:15px;" src="img/book_p_w_picpath.png" width="89" height="94" />
            <p style="margin-top:5px;">Let's Measure
the Weather</p>
            </td>
            <td>A</td>
            <td>
            0            
            </td>
            <td>
            25%
            </td>
            <td>2014/12/05</td>
            <td>2014/12/05</td>
            <td>2014/12/05</td>
          </tr>
          <!--这个TR不要删-->
           <tr style="visibility:hidden;border:none">
                <td>Book Name</td>
                <td>Level</td>
                <td>Reading Score</td>
                <td>Reading Progress(%)</td>
                <td>Quiz Score</td>
                <td>Quiz Progress(%)</td>
                <td>Date</td>
            </tr>
        </table>
        </div>
</body>
</html>