表のセルに SVG (インライン XML) を埋め込むと、どうしても SVG 画像のはみ出し部分が隠れてしまいます。複数のセルに SVG を配置し、透明な背景を使用して、グラフィックが複数のセルにまたがるこのようなものを実現したいと考えています。
ここでは、表形式の表示が最も適切です。表示されていないその他のデータは、別の列に表示されます。
開始点 jsfiddle: http://jsfiddle.net/ApWTS/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<table>
<tr>
<td style="width:200px;height:100px;background-color: red;">top cell</td>
</tr>
<tr>
<td style="width:200px;height:100px;background-color: yellow;overflow:visible;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="80" stroke="black" stroke-width="2" fill="red"/>
</svg>
</td>
</tr>
<tr>
<td style="width:200px;height:100px;background-color: green;">bottom cell</td>
</tr>
</table>
</body>
</html>