粘貼在thead上的位置

Question

如您所知，position: sticky;已登陸Webkit（demo）。 到目前爲止，我可以看到這隻適用於父元素。但我想知道是否可以在帶有表格的滾動div中使用它。

所以它需要'聽'div的滾動事件，而不是table。

我知道我可以用javascript和絕對定位來做到這一點，但我想知道sticky-positioning是否會支持這一點。

Answer 1

事實證明它只能在窗口中工作，而不是在滾動div中。

我創建了一個test-case有一個很長的表與表頭：

<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：

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; 
}​ 

正如你可以看到，如果從包裝取出溢並且讓你的窗戶不那麼高，桌面堅持到窗口的頂部。我並不適用於包裝div，即使你做給divposition: relative

Answer 2

position: sticky不會（因爲他們display屬性與table-開始長）工作與表元素，因爲表是不是specification部分：

其它種類的佈局，如表中，「浮動」盒，紅寶石註釋，網格佈局，列和的正常「流動」的內容基本處理，在其它模塊進行說明。

Answer 3

如果您需要鉻粘頭只有這樣，你可以在thead元素設置td元素position: sticky; top: some_value（top屬性是強制性的）。

請參見：

<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