表の見出しを固定する方法

Pocket

行数の多い表は見出しを固定したほうが見やすいです。
HTMLで表の見出しを固定する方法です。

見出し部分をtheadタグで挟みます。

<thead>
<tr><th>見出し</th></tr>
</thead>

styleを次のようにします。

thead{
position: sticky;
top: 0;
}

これで見出しが固定されます。
スクロールしたときに行と見出しが重なるのが見にくい場合は見出しの背景色を設定するとよいです。
次のようにします。

thead{
position: sticky;
top: 0;
background: white;
}

タグに埋め込むこともできます。

<thead style="position:sticky;top:0;background:white;">

使用例を示します。

table_sticky

[ 2024年2月25日 | カテゴリー: デジタル | タグ: , ]

« | »

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

送信してください。


タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報