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で設定)のパーセンテージ指定ができないところです。
あと幅確保対策がかっこ悪いです。ただ、テーブルに罫線を引かず、かつグラフより右側にカラムが無い場合は、全く対処しなくてもいいですね。