HTML/CSS: вертикальная граница, перекрывающая горизонтальную границу

Вот скрипка: 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, пожалуйста, доступность)

Ответы

Ответ 1

Это поведение вызвано тем, что вы сбрасываете границу таблицы, вместо этого используйте border-spacing: 0;, вызовите класс в первой строке данных, и я использовал селектор ниже, чтобы отключить border-top

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

Демо (Протестировано на хроме и 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;
}