Here is the fiddle : 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)
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
.second-row td {
border-top: 0;
}
Demo (Tested on chrome and 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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With