CSS

テーブルの見出しを固定できるjsがとても便利。

テーブルによる表の表示はよく利用します。ただ近年はスマホの対応があるのでこの表示領域はかなり絞られますよね。横スクロールで対応するというのは以前の記事でも書いたのですが、今回はさらに見出しを固定して可読性をあげようと思います。
色々ためしてみたのですが、一番しっくりきたのが「FixedMidashi.js」これの特徴は、一番上の行固定に加え複数行まで固定も可能という事ですね。
自分の備忘録も兼ねて、以下設置方法を書いていきます。

デフォルトのテーブル表

順位 名前 国語 数学 理科 社会 音楽 美術 体育 家庭 情報 合計 平均
1 佐藤 100 98 95 98 100 92 100 90 98 871 97
2 鈴木 98 96 93 96 98 90 98 88 96 853 95
3 高橋 96 94 91 94 96 88 96 86 94 835 93
4 田中 94 92 89 92 94 86 94 84 92 817 91
5 渡辺 92 90 87 90 92 84 92 82 90 799 89
6 伊藤 90 88 85 88 90 82 90 80 88 781 87
7 山本 88 86 83 86 88 80 88 78 86 763 85
8 中村 86 84 81 84 86 78 86 76 84 745 83
9 小林 84 82 79 82 84 76 84 74 82 727 81
10 加藤 82 80 77 80 82 74 82 72 80 709 79
11 吉田 80 78 75 78 80 72 80 70 78 691 77
12 山田 78 76 73 76 78 70 78 68 76 673 75
13 佐々木 76 74 71 74 76 68 76 66 74 655 73
14 山口 74 72 69 72 74 66 74 64 72 637 71
15 松本 72 70 67 70 72 64 72 62 70 619 69
16 井上 70 68 65 68 70 62 70 60 68 601 67
17 斎藤 68 66 63 66 68 60 68 58 66 583 65
18 木村 66 64 61 64 66 58 66 56 64 565 63
19 64 62 59 62 64 56 64 54 62 547 61
20 清水 62 60 57 60 62 54 62 52 60 529 59

テーブルセルの装飾はCSSで対応しています。これでも良いですが、スクロールするとやはり見づらいですよね。

見出しを固定する

順位 名前 国語 数学 理科 社会 音楽 美術 体育 家庭 情報 合計 平均
1 佐藤 100 98 95 98 100 92 100 90 98 871 97
2 鈴木 98 96 93 96 98 90 98 88 96 853 95
3 高橋 96 94 91 94 96 88 96 86 94 835 93
4 田中 94 92 89 92 94 86 94 84 92 817 91
5 渡辺 92 90 87 90 92 84 92 82 90 799 89
6 伊藤 90 88 85 88 90 82 90 80 88 781 87
7 山本 88 86 83 86 88 80 88 78 86 763 85
8 中村 86 84 81 84 86 78 86 76 84 745 83
9 小林 84 82 79 82 84 76 84 74 82 727 81
10 加藤 82 80 77 80 82 74 82 72 80 709 79
11 吉田 80 78 75 78 80 72 80 70 78 691 77
12 山田 78 76 73 76 78 70 78 68 76 673 75
13 佐々木 76 74 71 74 76 68 76 66 74 655 73
14 山口 74 72 69 72 74 66 74 64 72 637 71
15 松本 72 70 67 70 72 64 72 62 70 619 69
16 井上 70 68 65 68 70 62 70 60 68 601 67
17 斎藤 68 66 63 66 68 60 68 58 66 583 65
18 木村 66 64 61 64 66 58 66 56 64 565 63
19 64 62 59 62 64 56 64 54 62 547 61
20 清水 62 60 57 60 62 54 62 52 60 529 59

それぞれスクロールしていただければ分かる通り、縦横に長いテーブル表は見出しを固定してあげた方が可読性が向上しますね。小さいことですが、この辺を気にしてあげると閲覧しているユーザーはもちろん、上司やクライアントにも仕事が丁寧と好印象を与えることが可能ですね。

設置方法

難しいことはなく基本は配布サイトよりスクリプトをダウンロードし、設置方法を見ていただければ簡単です。以下引用となります。

<script type="text/javascript" src="hoge/fixed_midashi.js"></script>

<!-- body mode -->
<body onLoad="FixedMidashi.create();">
  <table _fixedhead="rows:1; cols:1">
    ...

<!-- div mode -->
<style type="text/css" media="screen">
  div.scroll_div { overflow: auto; }
</style>
<body onLoad="FixedMidashi.create();">
  <div class="scroll_div">
    <table _fixedhead="rows:1; cols:1">
      ...

<!-- 混合 mode -->
<-- div モードの記述に加え、div-auto-size を指定します。-->
<table _fixedhead="rows:1; cols:2; div-auto-size: none;">

body モードでは、body のスクロールに反応して見出しを固定します。
div モードでは、div のスクロールに反応して見出しを固定します。 また、div のサイズが未指定の場合、body に収まるように div のサイズを調整します。
混合モード “div-auto-size: width” を指定することにより、 div の幅のみ body に収まるようにしています。 これにより、縦方向は body のスクロールに反応し、 横方向は div のスクロールに反応して見出しを固定するようになります。 幅も高さも画面に収まらない table をスマートフォンで表示する場合に 適しています。

引用:FixedMidashi トップページより

ダウンロード先

最後に

ちょっと手間取ったことが1つある。それは固定している箇所がスクロールしたときに微妙にずれるときがありました。jsは得意じゃないけど、挙動をみてみるとスクロールした時にDOMで縦横サイズを指定していたので、たぶんズレる原因はこのあたり。
結果対応したのは、box-sizingをinitialにしてボーダー部分や余白の計算をDOM生成の方に合わせたこと。box-sizing:border-boxにしてるとボーダーなどを含めた計算になるから、このあたりの算出が微妙に異なってズレてるのかも。


 

lifezakk

lifezakk

投稿者の記事一覧

フリーランスのWEBデザイナー。日々WEB制作で気になるHtml CSS Photoshop illustrator や好きなアプリの備忘録をつけてます。カメラはレタッチで使う素材撮りや趣味レベルでやっています。

関連記事

  1. Pythonの実行結果をGoogleスプレッドシートに出力してみ…
  2. 簡単に美しいマーブル模様をPhotoshop CCで作成する方法…
  3. table装飾時に持っておきたいベーステンプレートとなるCSS
  4. Pythonで作成したボットの実行結果をLINEに通知させる備忘…
  5. facebookのいいねボタンに5種類の感情ボタンが出現!
  6. LINEで郵便局の荷物追跡や再配達ができる!?
  7. マジックアワー α6400 – sigma 30mm f1.4
  8. 企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

おすすめ記事

Photoshopの「空の置き換え」について、どれだけラクになるか体感。私がよく使う現在の手順はコレ①選択範囲を作成②「選択とマスク」で微調整しマスク③空の画像を配置④色調補正「カラーの適用」でトーン調整これがワンタッチに。トーン調整が付いてるのがヤバイ。進化がはやいなぁ、sensei。 – フォトレタッチ

投稿コメントPhotoshopの「空の置き換え」について、どれだけラクになるか体感。私がよく使う…

四国 日の出。 – フォトレタッチ

投稿コメント四国 日の出。rezakk399 Instagram…

change hair color.Photoshop での髪色変更のレタッチです。黒髪からブロンド、赤へカラーチェンジをしてます。ノイズが出ないように、自然なレタッチになります。 – フォトレタッチ

投稿コメントchange hair color.Photoshop での髪色変更のレタッチです。…

カミナリ@ – from Instagram

投稿コメントカミナリ#カミナリを撮ってみました。現像で黒い部分を暗くしたりして雷光をキワだしてる…

カワウ – from Instagram

投稿コメントカワウrezakk399 Instagram…

人気記事

  1. モバサカ、アルカディア、三國志曹操伝 など気になる事前予約情報
  2. 黒い砂漠モバイル 序盤で知っておきたい7つの便利な機能と知識
  3. Sunset. – from Instagram
  4. iPhone7 / iPhone7 Plusに機種変更する方は念のためアプリの引継ぎを確認しよう。
  5. OVERHIT(オーバーヒット) 待望のレイドバトル「討伐戦」についてまとめ。

インスタグラム

This error message is only visible to WordPress admins

Error: There is no connected account for the user 8694609815 Feed will not update.

カテゴリー記事一覧

PAGE TOP