`position: Sticky;` を使用してスティッキー テーブル ヘッダーを作成するにはどうすればよいですか?

位置付きスティッキー テーブル ヘッダー: Sticky

位置: スティッキー;プロパティは最近 Webkit に実装され、ページがスクロールしても親コンテナ内で固定されたままになる要素を作成する便利な方法を提供します。この機能は当初、直接の親要素内でのみ機能していましたが、現在はテーブル内でのスクロールをサポートしています。

質問:

位置: スティッキー; はどのように使用できますか? div コンテナ内でスクロールするときにテーブル ヘッダーを修正するにはプロパティを使用しますか?

答え:

ヘッダー上の位置固定は 2018 年では簡単に機能します。次の CSS ルールを追加するだけです:

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

スティッキー ヘッダーを使用するには、テーブルに thead 要素と th 要素が含まれている必要があります。

<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>
      // your body code
    </tbody>
</table></code>

thead に複数の行が含まれる場合は、次のように指定できます。最初の行のスティッキー動作:

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

2018 年 3 月現在、スティッキー ヘッダーはほとんどの最新ブラウザでサポートされています。最新のブラウザ互換性情報については、https://caniuse.com/#feat=css-sticky を参照してください。

このソリューションのクレジットは、2017 年 12 月 3 日にコメントで共有した @ctf0 に与えられます。

以上が`position: Sticky;` を使用してスティッキー テーブル ヘッダーを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。