ホームページ  >  記事  >  ウェブフロントエンド  >  スティッキーヘッダーはテーブルヘッダーのスクロール Div 内で使用できますか?

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

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-11-02 08:29:29431ブラウズ

Can Sticky Headers be Used Within Scrolling Divs for Table Headers?

スクロール 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。