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

丑陋，对。那么为什么红色边框会覆盖/覆盖绿色边框？

我怎样才能获得“未被触及”的水平绿色边框？ （请不要HTML5 / CSS3，可访问性目的）

Answer 1

这种行为是因为你正在折叠表的边框，而是使用border-spacing: 0;，在第一个数据行上调用一个类，而不是使用下面的选择器来关闭{{1} }

border-top

Demo（在chrome和firefox上测试过）

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