テーブルの行を上部に固定する方法

Question

テーブルがthでない場合、td要素があります。私の最初の行を固定（ラベル）する方法はありますか？テーブルには、私は、固定されたフィールド名前と年齢との最初の行を作りたい、この

<table> 
    <tr> 
    <td>Name:</td> 
    <td>Age:</td> 
    </tr> 
    <tr> 
    <td>John</td> 
    <td>20</td> 
    </tr> 
    <tr> 
    ...... 
    </tr> 
</table> 

のようなものです。スクロール中にラベルが消えないようにします。

Answer 1

position:fixedを設定すると、あなたのためにそれを行う必要があります。

<tr style="position:fixed"> 
    <td>Name:</td> 
    <td>Age:</td> 
</tr> 

---

編集：

<tr style="position:fixed;top:0;background:#FFF;"> 
    <td>Name:</td> 
    <td>Age:</td> 
</tr> 

<tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
</tr> 

例：オンhttp://jsfiddle.net/aVQjN/

Answer 2

行を固定したい場合は、スタイルposition: fixedを設定し、その行の背景色を設定するか、リストをスクロールすると2つのレイヤーのテキストが表示されます。

注意が必要な別の問題は、固定位置スタイルの仕組みによって、最初の行が固定行の下に隠されるという事実です。これを空の行に入れて修正します。

<table width="400" border="1"> 
    <tr style="position: fixed; background-color: grey;"> 
     <td width="200"> 
      Name 
     </td> 
     <td width="200"> 
      Age 
     </td> 
    </tr> 
    <tr> 
     <td width="200"> 
      &nbsp; 
     </td> 
     <td width="200"> 
      &nbsp; 
     </td> 
    </tr> 
    <tr> 
     <td> 
      John 
     </td> 
     <td> 
      28 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Jacob 
     </td> 
     <td> 
      22 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Nicole 
     </td> 
     <td> 
      12 
     </td> 
    </tr> 
</table> 

は私の完全なコードについては、リンクを参照してください。 http://jsfiddle.net/brettadamsga/yeAhU/

Answer 3

ページやコンテナの上部に行（唯一ではない）を凍結するプラグインを作成しました。それを自由に使用してください。 http://maslianok.github.io/stickyRows/

Answer 4

私はこの問題の答えをしばらく探していましたが、ついに私は非常にうまくいくものを見つけました。

秘密は

thead, tbody, tr, td, th { display: block; } 

テーブルにスクロールが可能になります。しかし、あなたがここにhttp://jsfiddle.net/T9Bhm/7/の完全な例を見つけることができるコードのこの部分です。

希望すると助かります！ :)

Answer 5

データテーブルの使用我々はまた、ヘッダーとフッターを修正することができます。 下記のコードを探してください......

tbl_Purcordr=$("#tbl_Purcordr").DataTable({ 
    'paging': true, 
    'pageLength': 25, 
    'bLengthChange': false, 
    'sorting': false, 
    'filter': true, 
    'info': false, 
    'scrollY': 360, 
    'background': 'none', 
    'fixedHeader': { 
    'header': true, 
    'footer': true 
    } 
});