はじめに
仕事でCSSフレームワークを使わずにテーブルを作成する機会があったので、備忘録としてプライベートでもマトリクス図を作ってみました。
環境
SPAフレームワークのAngularを使用しています。
- Angular: 8.2.14
- Node: 12.13.1
マトリクス図の作成
サンプルとして、年収と年齢から、その人がお客さんになってくれそうかどうかを判定するマトリクス図を作ってみます(トップの画像が完成図)。
CSSリセット
デフォルトで<table>
タグを使うと、セルとセルの間に余白ができてしまうので、下記のCSSを追加してセルの隙間を消します。
table { border-collapse: collapse; border-spacing: 0; }
マトリクス図の全コード
完成したマトリクス図の全コードになります。Angualrフレームワークを使用しない場合は、matrix.component.ts
は必要ないので無視してください。
レイアウトの設定はSCSSを使用しています。