検索

ホームページ >ウェブフロントエンド >jsチュートリアル >CSS と JavaScript を使用して HTML テーブルのヘッダーを固定するにはどうすればよいですか?

CSS と JavaScript を使用して HTML テーブルのヘッダーを固定するにはどうすればよいですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-12-09 00:06:13296ブラウズ

How Can I Freeze HTML Table Headers Using CSS and JavaScript?

固定 HTML テーブル ヘッダーのための CSS および JavaScript テクニック

Microsoft で見られる、HTML テーブルの列見出しを固定する機能Excel の「ペインの固定」機能は、拡張テーブルに非常に適しています。 CSS または JavaScript を使用してこの効果を実現できるブラウザ間テクニックがいくつかあります。

CSS 変換テクニック

最新のブラウザの場合、CSS 変換はシンプルな機能を提供します。効果的な解決策:

 var translation = "translate(0,") this.scrollTop "px)";<br> this.querySelector("thead").style.transform = translation;<br>});<br>

このコードは以下をリッスンしますテーブル コンテナ上のスクロール イベントと、スクロールに基づいてテーブル ヘッダー (thead) を変換します。

CSS 変換テクニックの利点:
  • 最小限のコード (4 行)
  • 外部依存関係なし
    • さまざまなテーブル構成で動作します(table-layout)
  • Internet Explorer 8 を除くすべての主要なブラウザをサポート-

実装例:



 var translation = "translate(0," this.scrollTop "px)";<br> this.querySelector("thead").style.transform = translation; <br>});
 既存のコンテナ/<h1></h1>wrap {<pre class="brush:php;toolbar:false">overflow: auto;
height: 400px;

}

/ デモ用 CSS
/

td {
background-color: green;
width: 200px;
height: 100px;


}

<table>
    <thead>
        <tr>
            <th>Foo</th>
            <th>Bar</th>
        </tr>
    </thead>
    <tbody>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
    </tbody>
</table>
<p><br></div>
”

以上がCSS と JavaScript を使用して HTML テーブルのヘッダーを固定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript css html for using class var this position transform column table td microsoft excel Translate
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScript の継承はコンストラクター プロパティと「instanceof」演算子にどのような影響を与えますか?次の記事：JavaScript の継承はコンストラクター プロパティと「instanceof」演算子にどのような影響を与えますか?

関連記事

続きを見る