CSSで横棒グラフを描く
無理にCSSで横棒グラフを描こうと思いました。
はじめ、div.graph と span.content の二重構造にして、div.graphの背景色でグラフを描こうとしました。しかし、span.contentの幅がdiv.graphの幅を超えていると、IEの場合、div.graphの幅を拡張してしまい、数字は"0%"なのに、グラフは10%程度あるようなかんじになってしまいました。
そこで、太い境界線を使ってグラフに仕立て上げようと考えました。
CSSはこんなかんじ。
/* グラフ幅は200pxにしています */ th div.graph { border: 0; /* 幅確保のため */ /* 左右のパディング幅 = グラフの最大幅/2 + td.div.graphのパディング */ padding: 0 110px 0 110px; } td div.graph { border-style: solid; border-color: #f00; border-width: 0; /* 各要素でborder-left が上書き設定される */ padding: 0 10px 0 10px; }
htmlはこんなかんじ。
<table border="1"> <tbody> <tr> <th>名称</th> <th><div class="graph" style="">確率</div></th> </tr> <tr> <th>テスト1</th> <td><div class="graph" style="border-left-width:200px">100%</div></td> </tr> <tr> <th>テスト2</th> <td><div class="graph" style="border-left-width:80px">40%</div></td> </tr> <tr> <th>テスト3</th> <td><div class="graph" style="border-left-width:0px">0%</div></td> </tr> </tbody> </table>
欠点は、グラフの幅(border-left-widthで設定)のパーセンテージ指定ができないところです。
あと幅確保対策がかっこ悪いです。ただ、テーブルに罫線を引かず、かつグラフより右側にカラムが無い場合は、全く対処しなくてもいいですね。