Bordo verticale di <thead> di colore diverso che sul resto del <table> border - sanguina nel bordo orizzontale in basso - Firefox problema colspan

Question

Ho un <table> dove voglio i bordi verticali nella <thead>/<th> essere di un colore diverso rispetto al resto della i bordi (tutti i bordi hanno 1 pixel di larghezza, nessun bordo in cima alla tabella). Questo può sembrare facile - il problema è che sia in Firefox, Safari e Chrome, questi bordi verticali "sanguinano" nel bordo orizzontale sottostante, che non sembra molto bello. In Firefox sembra OK se la riga sotto lo <thead> contiene la stessa quantità di colonne/celle del <thead>, ma se uso <colspan> ottengo il "sanguinamento".

La soluzione più ovvia sarebbe utilizzare, ad esempio, "solido" sui bordi verticali <th> e "doppio" sui bordi orizzontali <td> qui sotto - e questo funziona davvero in Safari e Chrome. Tuttavia, non ho ancora trovato una soluzione per Firefox, e penso di aver provato di tutto. Non riesco a rimuovere il collasso del bordo perché è necessario per altri scopi. (Sì, per impostazione predefinita sembra che io voglio in IE8 e Opera!)

Visualizza esempio: http://jsfiddle.net/7YdCQ/

codice (un esempio molto semplice, con colori forti) - CSS (tutti i confini solidi):

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

HTML (2 tavoli, 1 con colspan):

<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

La soluzione è quella di ignorare gli stili CSS correttamente. Testato con colspan in <th> di entrambi i tag <thead> e <tbody>. Esempio Modificato: 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; } 

HTML

<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>