簡単な水平グラフを生成するためにテーブルを使用します (スケーリングを容易にするため)。colspanning を使用して正確なオーバーラップを取得します (セルが互いにオーバーラップすることもありますが、この例ではそうではありません)。
私の問題は、IE(8) が相対的なセル幅を間違ってレンダリングすることです。
セルがコンテンツよりも小さくなることはありませんが、それはここでは問題ではありません。
たとえば、例の「X 65」セルは、IE の 47% よりもかなり広くなります。しかし、Firefoxはうまくやっています。
次に例を示します。
<html>
<body>
<style>
table.CompAnalysisTable {
border-width: 1px;
border-spacing: 0px;
border-style: solid;
border-color: black;
border-collapse: collapse;
background-color: white;
font-size:8px;
}
table.CompAnalysisTable td {
border-width: 1px;
border-style: solid;
border-color: black;
}
table.CompAnalysisTable td table
{
border-style:none;
}
</style>
<table>
<tr>
<td>
</td>
<td class="nobr" valign="middle" align="left">Graph</td>
<td valign="middle" width="100%" align="right">Total 73</td>
</tr>
</tbody>
</table>
<table class="CompAnalysisTable" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="nobr" style="width: 47%; background-color: rgb(172, 172, 255);" colspan="65">X 65</td>
<td class="nobr" style="width: 47%; background-color: white;" colspan="65"></td>
<td class="nobr" style="width: 5%; background-color: rgb(172, 172, 255);" colspan="7">A 7</td>
<td class="nobr" style="width: 1%; background-color: rgb(172, 172, 255);">B 1</td>
</tr>
<tr>
<td class="nobr" style="width: 47%; background-color: white;" colspan="65"></td>
<td class="nobr" style="width: 52%; background-color: rgb(255, 152, 152);" colspan="72">A 72</td>
<td class="nobr" style="width: 1%; background-color: rgb(255, 152, 152);">B 1</td>
</tr>
</table>
</body>
</html>
div や行ごとに個別のテーブルなどの他の手法を試しましたが、重複を正確に取得するための唯一の手法は colspanning でした。
別の解決策は、サーバー上で画像をレンダリングすることですが、スケーリングが失われ、かなり時間がかかります。
どんな助けでも大歓迎です。