right border causes bottom border to disappear

Hey all,

As soon as I added this line of code:
colgroup col:first-child {
border-right: 1px solid red;
}


The bottom border disappeared. Anyone know why?

<style>
table {
color: #fff;
background-color: #202120;
border-collapse: collapse;
}

colgroup col:first-child {
border-right: 1px solid red;
}

tbody:first-child {
border-bottom: 1px solid red;
}

td[colspan] {
text-align: center;
}
</style>

<table>
<colgroup span="2">
<col span="1">
<col span="1">
</colgroup>
<tbody>
<tr>
<td>Email a support question.</td>
<td>Chat with a Support Personnel</td>
</tr>
<tr>
<td>Call Me Now</td>
<td>User Manual</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="2">FAQ</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>


thanks for response

There is no bottom border, with or without that CSS selector (IE and FF tested). What are you talking about? On which browser?

Maybe you don't understand too well what :first-child pseudo class means. The :first-child pseudo class means "if this element is the first child of its parent", not the first child of this element.