Chrome専用のスティッキーテーブルヘッダー

Question

私はテーブルスクロール時に<thead>を浮動させたい次のSassスニペットを持っています。これはSafariでは正常に動作しますが、Chromeでは正しく動作しませんVersion 58.0.3029.110 (64-bit)。

私はChromeがstickyのオン - オフ - オフ - 再度サポートを持っていて、現在それをサポートしていますが、それは最終的なものですか？これはChromeのバグですか、別のソリューションが必要ですか？ （それはよりパフォーマンスですので、私はJavascriptのではなく、CSSのアプローチを好む。）

.table { 
    thead { 
    background: white; 
    position: sticky; 
    top: 0; 
    z-index: 10; 
    } 
} 

Answer 1

位置：スティッキーChromeで一部の表要素（THEAD/TR）では動作しません。あなたは粘着性になる必要がありますtrのtds/thsに粘着性を移動することができます。このように：

.table { 
    thead tr:nth-child(1) th{ 
    background: white; 
    position: sticky; 
    top: 0; 
    z-index: 10; 
    } 
} 

これも機能します。

.table { 
    position: sticky; 
    top: 0; 
    z-index: 10; 
} 

ヘッダーを別のレイアウトに移動することができます。例：ここでは

<table class="table"> 
    <thead> 
    <tr> 
     <th>1</th> 
     <th>2</th> 
     <th>3</th> 
     <th>4</th> 
    </tr> 
    </thead> 
</table> 
<table> 
    <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> 
</table> 

Answer 2

https://jsfiddle.net/y9cwnb81/4/

div.table { 
    width: 100%; 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    grid-template-rows: 1fr auto; 

    grid-template-areas: 
    "header header header" 
    "content content content"; 
} 

.header { 
    grid: 1fr/1fr; 
} 

.content { 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    grid-template-rows: auto; 
    grid-area: content; 
    height: 200px; 
    overflow-y: scroll; 
} 

.content div { 
    grid: auto-flow 1fr/repeat(auto-fill); 
} 

<!-- Here is the table code --> 

<div class="table"> 
    <div class="header">Name</div> 
    <div class="header">Color</div> 
    <div class="header">Description</div> 
    <div class="content"> 
    <div>Apple</div> 
    <div>Red</div> 
    <div>These are red asd,mas, da,msnd asndm,asndm,asndbansbdansmbdmnasbd.</div> 

    <div>Apple</div> 
    <div>Red</div> 
    <div>These are red asd.</div> 

    <div>Apple</div> 
    <div>Red</div> 
    <div>These are red asd.</div> 

    <div>Apple</div> 
    <div>Red</div> 
    <div>These are red asd.</div> 

    <div>Apple</div> 
    <div>Red</div> 
    <div>These are red asd.</div> 

    <div>Apple</div> 
    <div>Red</div> 
    <div>These are red asd.</div> 

    <div>Apple</div> 
    <div>Red</div> 
    <div>These are red asd.</div> 

    <div>Apple</div> 
    <div>Red</div> 
    <div>These are red asd.</div> 

    <div>Apple</div> 
    <div>Red</div> 
    <div>These are red asd.</div> 

    <div>Apple</div> 
    <div>Red</div> 
    <div>These are red asd.</div> 

    <div>Apple</div> 
    <div>Red</div> 
    <div>These are red asd.</div> 
    </div> 
</div> 

だけCSSで粘着性を持っていることがCSSのGRIDを使用した例で、何のjavascriptは必要ありません。