HTML/CSS：垂直邊界重疊水平邊框

Question

這裏是小提琴： 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; 
} 

醜吧。那麼爲什麼紅色邊框覆蓋/覆蓋綠色邊框？

我怎樣才能得到「未觸及」的水平綠色bordel？ （請勿使用HTML5/CSS3，可訪問性）

Answer 1

該行爲是由於您摺疊表的邊框而引起的，請使用border-spacing: 0;來代替，請在第一個數據行上調用類，而不是使用下面的選擇器關閉border-top

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

Demo（測試Chrome和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; 
}