HTML中table帶捲軸而標題列不移動的做法

首先申明做法有很多,介紹其中一種.

<html>

<body>

<table width="100%" align="center" border=0>

       <tr>

       <table  width="100%"  border=1>

       <tr>

              <td width="50%">

                     biaoti1321

              </td>

              <td width="50%">

                     biaoti2321321

              </td>

           <td>

                     &nbsp;

              </td>

       </tr>

       </table>

       </tr>

   <tr>

   <td align="center" width="100%">

    <div  style="overflow-y:auto; width:100%;height:100px">

    <table width="100%" border=1>

       <tr>

              <td>111</td>

              <td>111</td>

       </tr>

              <tr>

              <td>111</td>

              <td>111</td>

       </tr>

              <tr>

              <td>111</td>

              <td>111</td>

       </tr>

              <tr>

              <td>111</td>

              <td>111</td>

       </tr>

              <tr>

              <td>111</td>

              <td>111</td>

       </tr>

              <tr>

              <td>111</td>

              <td>111</td>

       </tr>

              <tr>

              <td>111</td>

              <td>111</td>

       </tr>

              <tr>

              <td>111</td>

              <td>111</td>

       </tr>

              <tr>

              <td>111</td>

              <td>111</td>

       </tr>

   </table>

    </div>

   </td>

  

   </tr>

 </table>

 </body>

 </html>

 

具體思路這個是一個大table，然後表頭與結果域各一個table，

表頭的標題是N個，那麼就需要分N＋1個td，前面N個TD的width總和為100％，最後1個為了給捲軸位置，不然不好與下面table對齊。

下面的結果體table需要包含在div中，設定td的長度與上面td長度要保持一致，這樣就可以了。