在上面創建粘性標題

我有一張表可能會變得很長，因此頁面會丟失，所以我認爲一個粘性標題可以解決這個問題。你向下滾動太多，標題仍然在那裏讓你知道這些字段是什麼。在上面創建粘性標題

我知道用jQuery做一個粘性頭的傳統方式，但我想用css來嘗試一種不同的方式。

我在網上發現this，它應該可以工作，但我似乎無法讓它做它應該做的。

.sticky { 
    position: -webkit-sticky; 
    position: -moz-sticky; 
    position: -ms-sticky; 
    position: -o-sticky; 
    top: 15px; 
}

和幫助將是偉大的或任何其他css技巧來幫助這項工作將是偉大的。

我建立了一個超過here的jsFiddel，我的表單看起來很像，所以你可以很好地瞭解發生了什麼。

2014-01-08 zazvorniki

看看answer。神奇的是在position: fixed。

如果你想跳槍：工作示例here

編輯

我不認爲你可以做到這一點乾淨沒有JavaScript。然而，我對這個問題很感興趣，所以我提出了這個解決方案。它使用圍繞overflow: scroll的數據的包裝div。

2014-01-08 18:13:45

我試圖避免任何形式的JavaScript或jQuery的，但... – zazvorniki

我發現，使用一個單獨的'div'to實現這一小提琴。請參閱：http：//jsfiddle.net/hGYkt/您可能可以使用它來將其應用於表格。 –

當我嘗試將它應用到表頭時，雖然它失敗了。把一個獨立的div放在thead上是不可取的，這就是我想要粘貼的東西。我的桌子也可以在頁面上的任何地方，這不是頁面上的第一件事。我只想在向下滾動時閱讀標題。 – zazvorniki

除非有bug在Chrome中，你不能直接解決thead。因此，你必須解決它個元素：

thead th { 
    position: sticky; 
    position: -webkit-sticky; 
    top: 0; 
    background: white; 
    z-index: 10; 
}

2017-07-18 14:22:20 Jules

回答