ヘッダーを固定する
Webアプリでヘッダーを固定しようと思います。
IEのときは苦戦しましたが、Edgeでは
position: sticky;
が使えます。
いつも使う頃に忘れているので、サンプルコード纏めておきます。
サンプルその１
See the Pen Untitled by masayasu_t (@cjlsrdxi-the-builder) on CodePen.
タイトルだけだとつまらないので、サブタイトルも固定しています。
htmlでは下に書かれた要素が前方に来るため、z-indexを指定しないとサブタイトルがタイトルの上に来ます。
サンプルその２
See the Pen Untitled by masayasu_t (@cjlsrdxi-the-builder) on CodePen.
テーブルで縦横のヘッダー、フッターを固定しています。
罫線がきれいになるように線を描画する側のセルを意識しています。