the sticky on thead

Question

ご存じのように、position: sticky;はWebkit（demo）に上陸しました。 これまでのところ、これは親要素内でのみ動作することがわかりました。しかし、私はテーブルとスクロールdivでこれを使用できるかどうかを知りたいです。

tableではなく、divのスクロールイベントを「聞く」必要があります。

私はこれをjavascriptと絶対配置で行うことができますが、sticky-positioningがこれをサポートするかどうかは疑問でした。

Answer 1

position: stickyはウィンドウ内でのみ動作し、スクロールするdivでは動作しません。

私はテーブルヘッダと非常に長いテーブルでtest-caseを作成しました：

h1 { 
    font-size: 18px; 
    font-weight: bold; 
    margin: 10px 0; 
} 
div.testTable { 
    height: 200px; 
    overflow: auto; 
} 

table.stickyHead thead { 
    position: -webkit-sticky; 
    top: 0px; 
    background: grey; 
} 
table.stickyHead td, 
table.stickyHead th { 
    padding: 2px 3px; 
}​ 

をあなたが見ることができるように、ラッパーからのオーバーフローを削除する場合：

<h1>Position sticky</h1> 
<div class="testTable"> 
<table class="stickyHead"> 
    <thead> 
     <tr> 
      <th>column 1</th> 
      <th>column 2</th> 
      <th>column 3</th> 
      <th>column 4</th>    
     </tr>  
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
    </tbody> 
</table> 
</div>​ 

私が使用してCSSをあなたの窓を高くしないようにしてください。テーブルヘッドは窓の上部にくっついています。私はあなたがテーブルがspecificationの一部ではないので、（そのdisplay属性がtable-で始まる限り）divposition: relative

Answer 2

position: stickyテーブル要素と動作しない与える作る場合でも、divを包むには適用されません。

テーブル、フローティングボックス、ルビーアノテーション、グリッドレイアウト、カラム、および通常の「フロー」コンテンツの基本的な処理など、他の種類のレイアウトが他のモジュールで説明されています。

Answer 3

あなたはクロームのスティッキヘッダーが必要な場合にのみ、あなたはthead要素でtd要素のために（topプロパティは必須です）position: sticky; top: some_valueを設定することができます。

参照：

<table border=1> 
    <thead> 
    <tr> 
     <td style='position: sticky; top: -1px;background: red'>Sticky Column</td> 
     <td>Simple column</td> 
    </tr> 
    </thead> 

table with a stiky header