HTML/CSS: Bordo verticale sovrapposizione bordo orizzontale

Question

Ecco il violino: http://jsfiddle.net/AV38G/

HTML

<table> 
    <tr class="first-line"> 
     <td class="first-column">Some</td> 
     <td>Foobar</td> 
     <td>Stuff</td> 
    </tr> 
    <tr> 
     <td class="first-column">foobar</td> 
     <td>raboof</td> 
     <td>184</td> 
    </tr> 
    <tr> 
     <td class="first-column">bar</td> 
     <td>87458</td> 
     <td>184</td> 
    </tr> 
    <tr> 
     <td class="first-column">874</td> 
     <td>raboof</td> 
     <td>foobar</td> 
    </tr> 
</table> 

---

CSS:

/* ACTUAL CSS */ 
table { 
    width: 300px; 
    border-collapse: collapse; 
} 
tr td.first-column{ 
    border-left: none; 
} 
tr.first-line { 
    border-bottom: 3px solid green; 
    border-top: none; 
} 
tr.first-line td { 
    border-left: none; 
} 
td { 
    border-left: 3px solid red; 
} 
tr { 
    border-top: 3px solid red; 
} 

brutto, giusto. Quindi, perché il bordo rosso sovrascrive/sovrascrive il bordo verde?

Come posso ottenere il bordo verde orizzontale "non toccato"? (no HTML5/CSS3, per favore, accessibilità)

Answer 1

Questo comportamento è causato dal fatto che si sta comprimendo il bordo della tabella, utilizzare invece border-spacing: 0;, chiamare una classe sulla prima riga di dati e di aver utilizzato il selettore in basso per spegnere il border-top

.second-row td { 
    border-top: 0; 
} 

Demo (Testato su Chrome e Firefox)

/* ACTUAL CSS */ 
table { 
    width: 300px; 
    border-spacing: 0; 
} 

tr td.first-column{ 
    border-left: none; 
} 

td { 
    border-left: 3px solid red; 
    border-top: 3px solid red; 
} 

tr.first-line td { 
    border-left: none; 
    border-bottom: 3px solid green; 
    border-top: none; 
} 

.second-row td { 
    border-top: 0; 
}