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