HTMLの構文で入れ子のTABLEを作成したいのですがうまくいきません｡画像の左のような構造で､結果的に右のようなTABLEを作成したいと考えています｡ TABLEは赤線のものと…

HTMLの構文で入れ子のTABLEを作成したいのですがうまくいきません｡
画像の左のような構造で､結果的に右のようなTABLEを作成したいと考えています｡

TABLEは赤線のものと､青線のもの､橙線のものの3つがあります｡
赤線のﾃｰﾌﾞﾙの中に､青線のものと､橙線のものがあります｡
赤線のﾃｰﾌﾞﾙの右がTRでわけられており､橙線のものはその中にそれぞれ入っています｡

わざわざこのような構造にしたのは､橙線のﾃｰﾌﾞﾙは数が不定でJavascriptde操作しており
動的に数が変化するので､その際に高さを常に100%にしたく､このような構造にしました｡

また､右側の結果をみていただくとわかるのですが､ﾎﾞｰﾀﾞｰは結果的には重ねて1本のように見せています｡

どうしもてOperaなどでﾎﾞｰﾀﾞｰのずれが出るなどして完成できません｡

詳しい方ｻﾝﾌﾟﾙをいただけないでしょうか｡

おっしゃる条件で素直に組むと､確かに Opera でずれが発生しました｡私の場合は右の table の下部が 1px 空いてる感じでした｡何なんでしょうね｡

解決策は何ﾊﾟﾀｰﾝかあると思いますが､今回は table に border を指定せず､ｾﾙの 2 辺に border をあててやってみました｡

http://jsfiddle.net/zRjEZ/

一部に style 属性を使っているので注意して見て下さい｡ Chrome､Firefox､Opera､IE8 で確認しましたが､一見出来ている様に思います｡しかし､左の table (青) に要素を突っ込むとまた色々問題が見えてきてしまう気もします｡