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

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

デモページを表示

CSS

補足

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

jQuery

補足

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

HTML

補足

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