テーブルの見出しを固定できる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にしてるとボーダーなどを含めた計算になるから、このあたりの算出が微妙に異なってズレてるのかも。


 

モバイルバージョンを終了