HTML/CSS: 竖直边框与水平边框重叠问题

Question

这里是 JSFiddle 的链接：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，出于无障碍目的）

- 4wk_

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

- Mr. Alien

---

@JamesDonnelly 谢谢 :) 你的回答得到了一些好评，这真是体育精神，但不幸的是它在跨浏览器方面存在问题... - Mr. Alien