表头固定的问题,求解决方案,请帮忙解决...

以下是部分HTML代码 :
需要现实的效果为:
         1.列和数据也就是table2可以左右拉动
         2.因为数据比较长，需要设置表头固定,数据可以下拉
<table width="100%" border="0" align="center" cellpadding="2" cellspacing="2" >
      <tr>
      <td><div style="width: 800px; overflow-x: scroll" id="frameId1">
     <table namt="table2" width="2000px" border="0" align="center" cellpadding="1" cellspacing="1"  >
                          <tr>
                        <td class="list_data_table_tr" width="*">这一行这几列为表头需要固定</td>
                        <td class="list_data_table_tr" width="8%">Total Price <br/>(List/USD)</td>
                        <td class="list_data_table_tr" width="8%">Discount <br/>(FOB)</td>
                        <td class="list_data_table_tr" width="8%">Trade Term <br/>(DDP(VAT Excluded))</td>
                        <td class="list_data_table_tr" width="8%">Total Price <br/>(FOB USD)</td>
                        <td class="list_data_table_tr" width="8%">Total Price <br/>(DDP(VAT Excluded) USD)</td>
                        <td class="list_data_table_tr" width="8%">Percent  <br/>(DDP(VAT Excluded) USD)</td>
                        <td class="list_data_table_tr" width="8%">Special Discount</td>
                        <td class="list_data_table_tr" width="8%">Last  Discount</td>
                        <td class="list_data_table_tr" width="8%">Last Total Price<br/> (FOB USD)</td>
                        <td class="list_data_table_tr" width="8%">Last Total Price <br/>(DDP(VAT Excluded) USD)</td>
                        <td class="list_data_table_tr" width="8%">Avg. Price <br/>(FOB USD)</td>
                        <td class="list_data_table_tr" width="7%">Last Avg. Price <br/>(FOB USD)</td>
           </tr>
   
                   
                这是里数据部分,数据部分是从数据库查询出来的数据，查询出来的数据为一段拼接好的html代码,代码格式为:
<tr>
   <td>
        //这里的列数跟上面表头的列数一样多
   </td>
   ......
</tr>
这里我用<div   style="OVERFLOW-Y: auto;OVERFLOW-X: hidden; HEIGHT: 500px"> 我再加个table把数据放在这个里面,可以做成表头固定，但是格式跟上面的怎么对起，有什么好的解决办法。  
        
    </table>
   </div></td>
   </tr>
</table>

解决方案 »

  1.   

    这貌似做不到，如果横向没有滚动条倒是可以，但是如果横向也有滚动条的话就不行了。如果横向没有滚动条的话，可以把头部和数据分开，把数据专门放在一个div里面，然后可以在数据部分加上滚动条，这样就可以做到头部固定了。但是如果数据部分横向也有滚动条的话，滚动横向滚动条抬头部分可能就不会跟着动了。
      

  2.   

    数据可以左右拉动，title不拉动，那只要数据一动，不就对不齐了么？
      

  3.   

     <html   xmlns="http://www.w3.org/1999/xhtml"   xml:lang="en"   lang="en"><head>   
      <style   type="text/css">   
      <!--   
      body   {   
        background:   #FFF;   
        color:   #000;   
        font:   normal   normal   12px   Verdana,   Geneva,   Arial,   Helvetica,   sans-serif;   
        margin:   10px;   
        padding:   0   
      }   
          
      table,   td,   a   {   
        color:   #000;   
        font:   normal   normal   12px   Verdana,   Geneva,   Arial,   Helvetica,   sans-serif   
      }   
          
      .td   
          {   
        nowrap:'true';   
          }   
          
      div.tableContainer   {   
        clear:   both;   
        border:   1px   solid   #963;   
        height:   100px;   
        overflow:   auto;   
        width:   100%;   
      }   
          
      /*   WinIE   6.x   needs   to   re-account   for   it's   scrollbar.   Give   it   some   padding   */   
      html   div.tableContainer/*   */   {   
        padding:   0   16px   0   0   
      }   
          
      /*   clean   up   for   allowing   display   Opera   5.x/6.x   and   MacIE   5.x   */   
      html>body   div.tableContainer   {   
        height:   auto;   
        padding:   0;   
        width:   740px   
      }   
          
      div.tableContainer   table   {   
        float:   left;   
        width:   100%   
      }   
          
     
      thead.fixedHeader   tr   {   
        position:   relative;   
        /*   expression   is   for   WinIE   5.x   only.   Remove   to   validate   and   for   pure   CSS   solution             */   
        top:  expression(document.getElementById("tableContainer").scrollTop)   
      }   
            head:first-child+body   thead[class].fixedHeader   tr   {   
        display:   block   
      }   
          
      /*   make   the   TH   elements   pretty   */   
      thead.fixedHeader   th   {   
        background:   #C96;   
        border-left:   1px   solid   #EB8;   
        border-right:   1px   solid   #B74;   
        border-top:   1px   solid   #EB8;   
        font-weight:   normal;   
        padding:   4px   3px;   
        text-align:   center   
      }   
          
      /*   make   the   A   elements   pretty.   makes   for   nice   clickable   headers                                 */   
      thead.fixedHeader   a,   thead.fixedHeader   a:link,   thead.fixedHeader   a:visited   {   
        color:   #FFF;   
        display:   block;   
        text-decoration:   none;   
        width:   100%   
      }   
          
      /*   make   the   A   elements   pretty.   makes   for   nice   clickable   headers                                 */   
      /*   WARNING:   swapping   the   background   on   hover   may   cause   problems   in   WinIE   6.x       */   
      thead.fixedHeader   a:hover   {   
        color:   #FFF;   
        display:   block;   
        text-decoration:   underline;   
        width:   100%   
      }   
                
      /*   make   TD   elements   pretty.   Provide   alternating   classes   for   striping   the   table   */   
      /*   http://www.alistapart.com/articles/zebratables/                                                           */   
      tbody.scrollContent   td,   tbody.scrollContent   tr.normalRow   td   {   
        background:   #FFF;   
        border-bottom:   1px   solid   #EEE;   
        border-left:   1px   solid   #EEE;   
        border-right:   1px   solid   #AAA;   
        border-top:   1px   solid   #AAA;   
        padding:   2px   3px   
      }   
          
      tbody.scrollContent   tr.alternateRow   td   {   
        background:   #EEE;   
        border-bottom:   1px   solid   #EEE;   
        border-left:   1px   solid   #EEE;   
        border-right:   1px   solid   #AAA;   
        border-top:   1px   solid   #AAA;   
        padding:   2px   3px   
      }   
          
      /*   define   width   of   TH   elements:   1st,   2nd,   and   3rd   respectively.             */   
      /*   All   other   non-IE   browsers.   Filter   out   Opera   5.x/6.x   and   MacIE   5.x   */   
      /*   Add   16px   to   last   TH   for   scrollbar   padding                                                   */   
      /*   http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors         */   
      head:first-child+body   thead[class].fixedHeader   th   {   
        width:   200px   
      }   
          
      head:first-child+body   thead[class].fixedHeader   th   +   th   {   
        width:   250px   
      }   
          
      head:first-child+body   thead[class].fixedHeader   th   +   th   +   th   {   
        border-right:   none;   
        padding:   4px   4px   4px   3px;   
        width:   316px   
      }   
          
      /*   define   width   of   TH   elements:   1st,   2nd,   and   3rd   respectively.             */   
      /*   All   other   non-IE   browsers.   Filter   out   Opera   5.x/6.x   and   MacIE   5.x   */   
      /*   Add   16px   to   last   TH   for   scrollbar   padding                                                   */   
      /*   http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors         */   
      head:first-child+body   tbody[class].scrollContent   td   {   
        width:   200px   
      }   
          
      head:first-child+body   tbody[class].scrollContent   td   +   td   {   
        width:   250px   
      }   
          
      head:first-child+body   tbody[class].scrollContent   td   +   td   +   td   {   
        border-right:   none;   
        padding:   2px   4px   2px   3px;   
        width:   300px   
          
      /*   expression   is   for   WinIE   5.x   only.   Remove   to   validate   and   for   pure   CSS   solution   */     
      top:   expression(document.getElementById("tableContainer").scrollTop)   
      }   
      -->   
      </style>   
      </head><body>   
      <div   id="tableContainer"   class="tableContainer">   
      <table   border="0"   cellpadding="0"   cellspacing="0"   width="100%"   class="scrollTable">   
      <thead   class="fixedHeader">   
        <tr>   
          <th><a   href="#">Header   1</a></th>   
          <th><a   href="#">Header   2</a></th>   
          <th><a   href="#">Header   3</a></th>   
          <th><a   href="#">Header   4</a></th>   
        </tr>   
      </thead>   
      <tbody   class="scrollContent">   
        <tr>   
          <td>Cell   Content   1</td>   
          <td>Cell   Content   2</td>   
          <td>Cell   Content   3</td>   
          <td>Cell   Content   4</td>   
        </tr>   
         <tr>   
          <td>Cell   Content   1</td>   
          <td>Cell   Content   2</td>   
          <td>Cell   Content   3</td>   
          <td>Cell   Content   4</td>   
        </tr>   
         <tr>   
          <td>Cell   Content   1</td>   
          <td>Cell   Content   2</td>   
          <td>Cell   Content   3</td>   
          <td>Cell   Content   4</td>   
        </tr>   
         <tr>   
          <td>Cell   Content   1</td>   
          <td>Cell   Content   2</td>   
          <td>Cell   Content   3</td>   
          <td>Cell   Content   4</td>   
        </tr>   
         <tr>   
          <td>Cell   Content   1</td>   
          <td>Cell   Content   2</td>   
          <td>Cell   Content   3</td>   
          <td>Cell   Content   4</td>   
        </tr>   
         <tr>   
          <td>Cell   Content   1</td>   
          <td>Cell   Content   2</td>   
          <td>Cell   Content   3</td>   
          <td>Cell   Content   4</td>   
        </tr>   
         <tr>   
          <td>Cell   Content   1</td>   
          <td>Cell   Content   2</td>   
          <td>Cell   Content   3</td>   
          <td>Cell   Content   4</td>   
        </tr>   
         <tr>   
          <td>Cell   Content   1</td>   
          <td>Cell   Content   2</td>   
          <td>Cell   Content   3</td>   
          <td>Cell   Content   4</td>   
        </tr>   
         <tr>   
          <td>Cell   Content   1</td>   
          <td>Cell   Content   2</td>   
          <td>Cell   Content   3</td>   
          <td>Cell   Content   4</td>   
        </tr>   
         <tr>   
          <td>Cell   Content   1</td>   
          <td>Cell   Content   2</td>   
          <td>Cell   Content   3</td>   
          <td>Cell   Content   4</td>   
        </tr>   
         <tr>   
          <td>Cell   Content   1</td>   
          <td>Cell   Content   2</td>   
          <td>Cell   Content   3</td>   
          <td>Cell   Content   4</td>   
        </tr>   
         <tr>   
          <td>Cell   Content   1</td>   
          <td>Cell   Content   2</td>   
          <td>Cell   Content   3</td>   
          <td>Cell   Content   4</td>   
        </tr>   
         <tr>   
          <td>Cell   Content   1</td>   
          <td>Cell   Content   2</td>   
          <td>Cell   Content   3</td>   
          <td>Cell   Content   4</td>   
        </tr>   
         <tr>   
          <td>Cell   Content   1</td>   
          <td>Cell   Content   2</td>   
          <td>Cell   Content   3</td>   
          <td>Cell   Content   4</td>   
        </tr>   
         <tr>   
          <td>Cell   Content   1</td>   
          <td>Cell   Content   2</td>   
          <td>Cell   Content   3</td>   
          <td>Cell   Content   4</td>   
        </tr>   
        
       
      </tbody>   
      </table>   
      </div>   
          
      </body></html>