テーブルのセル背景色で棒グラフを表示

テーブルのセルの値を元に、セルの背景色で棒グラフを表示。

デモページを表示

CSS

補足

• 表のデザインのみで、棒グラフに関する定義はしていない。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• このサンプルでは、棒グラフの色を CSS ではなく jQuery 内で定義している。
• tbody 内の各行について、セルの値を元に棒グラフの長さを計算して、背景色の linear-gradient で棒グラフを表示している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• add-bar-bg クラスがついた table 要素を処理対象にしている。

テーブルの横スクロール時に、左端の見出しセルを固定

jQuery を使って、テーブルの横スクロール時に、左端の見出しセルを固定。position: sticky は table との相性が悪いのか？ブラウザーによっては、ボーダー表示に不具合が出るので使用していない。

デモページを表示

CSS

補足

• 複製したテーブルを元のテーブルに重ねて表示している。
• 複製したテーブルは見出し以外のセルを非表示にして、左端の固定位置に表示している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• load、resize 時に、見出し用のテーブルを元のテーブルから複製している。
• セル内の折返しで各行の高さが変わってしまうので、複製する前に、行の高さをあらかじめ設定している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 見出しの位置固定とスクロールバーを表示するために、テーブルをふたつの div 要素で囲っている。

テーブルを２列表示と全列表示に切り替え

ウィンドウの幅が狭いと、列数の多いテーブルが見づらいので、指定した列と見出し列の２列表示に切り替える。

デモページを表示

CSS

補足

• table 要素に付ける two-column クラスを定義。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• このサンプルでは、テーブル１行目の商品名をクリックすると２列表示と全列表示が切り替わる（１行目左端の「商品名」をクリックした場合は、全列表示になる）。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• クリックで２列表示と全列表示を切り替える table 要素に two-column クラスを付ける。

クリックしたセルの列と行を色分け

テーブルのセルをクリックした時に、同一の列・行のセルを色分けする。

デモページを表示

CSS

補足

• 20行目：クリックしたセルと同一の行・列のセル仕様を設定。
• 24行目：クリックしたセルの仕様を設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• クリックできるのは td 要素のみとしている（th 要素は対象外）。
• 色分けする同一行・列のセルも td 要素のみとしている（th 要素は対象外）。
• クリックされたセルを再度クリックすると色分けが解除される。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• table要素に crosshair クラスを指定する。