ボーダーコラプスとコルスパンによる奇妙な動作

Question

組織図をHTMLで作成しようとしています。コードはかなりシンプルですが、私はChrome/SafariとOperaのレンダリングにいくつか問題があります。ここで

はそれがFirefoxとIEで動作として結果は、どのように見えるかです：ここでは

はChromeとSafariの

そして、ここではOperaであるです：

問題はCSSのborder-collapse: collapseプロパティから発生します。 cellspacing="0" cellpadding="0"という古いコーディングスタイルを使用すると多かれ少なかれ動作しますが、HTML5では有効ではありません。

私は、問題を表示するためにjsFiddleを作成：http://jsfiddle.net/aGVp4/7/

マイHTML：

<table cellspacing="0" cellpadding="0"> 
    <tr> 
     <td colspan="3"></td> 
     <td colspan="2" class="case"></td> 
     <td colspan="3"></td> 
    </tr> 
    <tr> 
     <td colspan="3"></td> 
     <td colspan="2" class="case"></td> 
     <td colspan="3"></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td colspan="3" class="right bottom"></td> 
     <td colspan="3" class="bottom"></td> 
     <td></td> 
    </tr> 
    <tr> <!-- No colspan here, to make the layout symmetrical --> 
     <td class="right"></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td class="right"></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td colspan="2" class="case"></td> 
     <td colspan="4"></td> 
     <td colspan="2" class="case"></td> 
    </tr> 
</table> 

そして、私のCSS：

.orgchart { 
    border-spacing: 0; 
    border-collapse: collapse; 
} 

td { 
    width: 3em; 
    height: 1em; 
} 

td.case { 
    border: 1px solid black; 
} 

td.right { 
    border-right: 1px solid black; 
} 

td.bottom { 
    border-bottom: 1px solid black; 
} 

td.top { 
    border-top: 1px solid black; 
} 

Answer 1

問題は、ブラウザで折りたたみ境界線モデルの解釈が異なるために発生しているようです。 border conflict resolutionはスロットではなくセルで定義され、colspan=3を使用する場合は1つのセルが3つのスロットにまたがります。

2行目の2番目のセルは下の実線の境界線を持ち、3番目の行の2番目のセルは上の境界線を持たない。ボーダーが崩壊すると、ソリッドは勝利しません。しかし、細胞は部分的にしか隣接していません。ブラウザはこれを別の方法で渡します。 Chromeは境界線を上部セルのすべての列に張り巡らすが、Firefoxでは境界線が1つだけの列になり、セルが共有する列はより合理的だが、CSS 2.1では問題を開いたままにしているようだ。

私はborder: hiddenで試してみましたが、これはChromeで役立ちますが、Operaでは新しい問題が発生します。

2つのオプションがあるようです。彼らが仕事をするなら、あなたはHTML属性を使うことができます。 HTML5 CRでは廃止され禁止されていると宣言されていますが、同じ文書でもブラウザでの継続的なサポートが必要です。

しかし、よりクリーンで、おそらくより堅牢なアプローチは、空のセルを追加することによって問題を回避することです。これは、2つの3行目のセルを2つのセルに分割し、そのうちの1つだけが2行目のセルと境界線を共有することを意味します。

<table class="orgchart"> 
<tr> 
    <td colspan="3"></td> 
    <td colspan="2" class="case"></td> 
    <td colspan="3"></td> 
</tr> 
<tr> 
    <td colspan="3"></td> 
    <td colspan="2" class="case" ></td> 
    <td colspan="3"></td> 
</tr> 
<tr> 
    <td></td> 
    <td colspan="2" class="bottom"></td> 
    <td class="right bottom"></td> 
    <td class="bottom" ></td> 
    <td colspan="2" class="bottom" ></td> 
    <td></td> 
</tr> 
<tr> <!-- No colspan here, to make the layout symmetrical --> 
    <td class="right"></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td class="right"></td> 
    <td></td> 
</tr> 
<tr> 
    <td colspan="2" class="case"></td> 
    <td colspan="4"></td> 
    <td colspan="2" class="case"></td> 
</tr> 
</table> 

Answer 2

を私はあなたのjsfiddleで演奏し、ハックすることが判明ChromeとSafariで問題を解決してください。

FFやIEでも動作しますが、Operaではテストしませんでした。

（jsfiddle）これを試してみてください：これはハックです

td.bottom { 
    border-top: 1px solid white; // this is the hack 
    border-bottom: 1px solid black; 
} 
td.right.bottom { 
    border-top: none; // fix for IE 
} 

として、それはあなたのチャートが複雑になるにつれて動作しますが、これは短期的には役立ちます願っていないかもしれません。

Answer 3

はこの問題（ない美しいソリューションが、作品を）修正しますCOLSPANの下に新しい空の行<tr></tr>を追加します。これは、テーブル、さらに格子状ではなく、本質的に、より複雑になります。