HTML/CSS : Vertical border overlapping horizontal border

Here is the fiddle : http://jsfiddle.net/AV38G/

这是小提琴: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;
}

Ugly, right. So why the red border overwrite/override the green border ?

丑,对。那么为什么红色边框会覆盖/覆盖绿色边框?

How can I get the "untouched" horizontal green bordel ? (no HTML5/CSS3 please, accessibility purposes)

如何才能获得“未被触及”的水平绿色边框? (请不要HTML5 / CSS3,可访问性目的)

1 个解决方案

#1

That behavior is caused because you are collapsing the border of the table, use border-spacing: 0; instead, call a class on the first data row and than I've used the selector below to turn off the border-top

导致该行为是因为您正在折叠表的边框,请使用border-spacing:0;相反,在第一个数据行上调用一个类,而不是我使用下面的选择器来关闭border-top

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

Demo (Tested on chrome and firefox)

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