垂直境界線 - 以下の水平ボーダーに出血 - FirefoxのCOLSPAN問題

Question

私はの残りの部分よりも、私は<thead>/<th>の縦の境界線が別の色のようにしたい<table>を持っています境界線はすべて1ピクセル幅で、表の上に境界線はありません。これは簡単に思えるかもしれません - 問題は、Firefox、Safari、Chromeの両方で、これらの垂直の境界線が下の水平境界線に「にじみ」してしまい、非常にうまく見えません。 Firefoxの場合、<thead>の下の行には<thead>と同じ量の列/セルが含まれていますが、<colspan>を使用すると「流し込み」が発生します。

明白な解決策は、例えば、垂直<th>国境の「ベタ」と以下。水平<td>国境の「ダブル」のために使用することです - これは確かにSafariとChromeで動作します。しかし、私はまだFirefoxのための解決策を思いつきませんでした、私はすべてを試したと思います。私は他の目的のために必要な境界崩壊を取り除くことはできません。 （私はIE8とオペラにしたいようにはい、デフォルトではそれが見えます！）

表示例：http://jsfiddle.net/7YdCQ/

コード（強い色で非常に簡単な例） - CSS（固形すべての国境）：

table { border-collapse: collapse; } 
thead th { border-left: 1px solid #F00; border-right: 1px solid #F00; } 
tbody th, td { border: 1px solid #0F0; } 

HTML（COLSPANとの2つのテーブル、1）：

<table> 
    <thead> 
     <tr> 
      <th>Thead TD 1</th> 
      <th>Thead TD 2</th> 
      <th>Thead TD 3</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <th colspan="3">Tbody TH colspan 3</th> 
     </tr> 
     <tr> 
      <td>Tbody TD</td> 
      <td>Tbody TD</td> 
      <td>Tbody TD</td> 
     </tr> 
    </tbody> 
</table> 
<table> 
    <thead> 
     <tr> 
      <th>Thead TD 1</th> 
      <th>Thead TD 2</th> 
      <th>Thead TD 3</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Tbody TD</td> 
      <td>Tbody TD</td> 
      <td>Tbody TD</td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

解決策が適切にCSSスタイルをオーバーライドすることです。 colspanで<th><thead>と<tbody>タグの両方でテストされています。編集された例：http://jsfiddle.net/7YdCQ/21/

CSS

table { border-collapse: collapse; } 
tbody th, tbody td { border: 1px solid #0F0; } 
thead td, thead th, tbody th { border-left: 1px solid #F00; border-right: 1px solid #F00; } 

私は上の境界線の色を変更したいとクローム/サファリソリューションは、私にとって非常にうまく動作しないことを追加することができ

<table> 
    <thead> 
     <tr> 
      <th>Thead TH 1</th> 
      <td colspan='2'>Thead TD colspan 2</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <th colspan='3'>Tbody TH colspan 3</th> 
     </tr> 
     <tr> 
      <td>Tbody TD</td> 
      <td>Tbody TD</td> 
      <td>Tbody TD</td> 
     </tr> 
    </tbody> 
</table> 
<br> 
<table> 
    <thead> 
     <tr> 
      <th>Thead TD 1</th> 
      <th>Thead TD 2</th> 
      <th>Thead TD 3</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Tbody TD</td> 
      <td>Tbody TD</td> 
      <td>Tbody TD</td> 
     </tr> 
    </tbody> 
</table>