スティッキーヘッダーはテーブルヘッダーのスクロール Div 内で使用できますか?

スクロール Div 内のスティッキー ヘッダー

位置: スティッキー;このプロパティは Webkit で注目を集めており、スクロール中に要素を親コンテナ内で固定したままにすることができます。ただし、一部の開発者は、この機能をテーブルを含むスクロール div 要素に拡張する必要があると表明しています。

スクロール div 内のテーブル ヘッダーに固定位置を適用できますか?

答え:

確かに、位置: スティッキー; に使用できるようになりました。要素 2018 年時点!

実装:

次の行を CSS に追加するだけですスタイルシート:

<code class="css">thead th { position: sticky; top: 0; }</code>

前提条件:

• テーブルに が含まれていることを確認してください。そして要素。

テーブル マークアップの例:

<code class="html"><table>
    <thead>
        <tr>
            <th>column 1</th>
            <th>column 2</th>
            <th>column 3</th>
            <th>column 4</th>            
        </tr>    
    </thead>
    <tbody>
      // body code
    </tbody>
</table></code>

追加オプション:

• 修正するには の最初の行スクロール中に次を使用します:

<code class="css">thead tr:first-child th { position: sticky; top: 0; }</code>

ブラウザのサポート:

2018 年 3 月現在、thead 要素のスティッキー配置は最新のブラウザ全体で広くサポートされています。開発者コミュニティの努力のおかげです。

以上がスティッキーヘッダーはテーブルヘッダーのスクロール Div 内で使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。