■cssでtable内にミニグラフ

PostgreSQL+PHPで実績表を作っていましたが数字だけだと分かりにくいです。
cssだけでTable内に簡単なミニグラフが表示出来る事が分かったのでやり方をまとめました

サンプル

商品	前年	今年
商品A	100	80
商品B	100	50
商品C	100	100

商品	前半	中盤	後半
商品A	100	100	100
商品B	100	25	65

こんな感じでセル内に簡単なグラフが表示出来ます。
まずはcss

table{
  background-color: #FFFFFF;
  font-family: sans-serif;
  border-width: 1px;
  border-color: #808080;
  border-style: solid;
  border-collapse:collapse;
  margin: 0px;
  padding: 0px;
}
th{
  background-color: #eee;
  border-width: 1px;
  border-color: #808080;
  border-style: solid;
  margin: 0px;
  padding: 0px;
}
td{
  text-align:right;
  border-width: 1px;
  border-color: #808080;
  border-style: dotted solid ;
  width: 80px;
  margin: 0px;
  padding: 0px;
}
.box{
  position: relative;
}
.graph-w{
  position: absolute;
  z-index: 1;
  display: block;
  height: 100%;
  background-color: #CCFFFF;
}
.graph-h{
  position: absolute;
  z-index: 1;
  display: block;
  width: 100%;
  bottom:0; 
  background-color: #CCFFFF;
}
.graph-text{
  position: relative;
  z-index: 2;
  text-align:right;
}