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

CSS

2019/4/10
CSS, WEB
コメント: 0
投稿者: lifezakk

テーブルによる表の表示はよく利用します。ただ近年はスマホの対応があるのでこの表示領域はかなり絞られますよね。横スクロールで対応するというのは以前の記事でも書いたのですが、今回はさらに見出しを固定して可読性をあげようと思います。
色々ためしてみたのですが、一番しっくりきたのが「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にしてるとボーダーなどを含めた計算になるから、このあたりの算出が微妙に異なってズレてるのかも。