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

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

設置方法

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

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 アプリの備忘録をつけてます。#OVERHIT や #ホウチ帝国 にハマってます★

関連記事

  1. YoutubeやUstreamの埋め込み動画をスマホ向けにレスポ…
  2. table装飾時に持っておきたいベーステンプレートとなるCSS
  3. Photoshopで対象物の色を変更する簡単な方法。
  4. Pythonの実行結果をGoogleスプレッドシートに出力してみ…
  5. GoProMAX等で撮影した360度写真をPhotoshopで簡…
  6. LINEで郵便局の荷物追跡や再配達ができる!?
  7. Photoshop CC 導入。バナー作成時に楽する複数アートボ…
  8. 企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載…

コメント

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

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

おすすめ記事

写真合成のレタッチ。 – from Instagram

投稿コメント写真合成のレタッチ。lifezakk Instagram…

光エフェクトのレタッチ。光エフェクトは、明るさの最大値とフィールドぼかしの効果の2種類を使ってます。調整には、トーンカーブの明暗を多用。 – from Instagram

投稿コメント光エフェクトのレタッチ。光エフェクトは、明るさの最大値とフィールドぼかしの効果の2種…

GoProMAX等で撮影した360度写真をPhotoshopで簡単に編集する方法。

先日発売されたGoProMAX。360度の写真や動画が撮影できるアクションカメラですね。今回は、…

GoProMaxからのキャプチャをPhotoshopでレタッチ。 – from Instagram

投稿コメントGoProMaxからのキャプチャをPhotoshopでレタッチ。lifeza…

GoProMax 360°で撮影し編集。360°で撮ってるからいろんな角度から繋ぎ込むことができる、しかもiPhoneで。スゴイ面白い。 – from Instagram

投稿コメントGoProMax 360°で撮影し編集。360°で撮ってるからいろんな角度から繋ぎ込…

人気記事

  1. 城ドラ キャラ能力バランス調整 8/31 一挙5体、デビルも上方修正だ!
  2. NEXONの新作アプリ「OVERHIT」を毎日10時間プレイしてみた感想
  3. ホウチ帝国 効率的な通常クエスト攻略について
  4. CSSグリッドレイアウトについて。flexboxより使いやすいが、問題はいつものアイツだな。
  5. ゾンビを揃えて感染拡大、爽快ゾンビマッチパズル!えっうちの庭にゾンビが!?

カテゴリー記事一覧

PAGE TOP