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

演示（在 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;
}