This is a defined behavior of
border-collapse. Page 357 of the O’Reilly CSS Definitive Guide 3rd Edition says:
if collapsing borders have the same style and width, but differ in color, then … from most to least preferred: cell, row, row group, column, column group, table.
if … come from same type of element, such as two rows… then color is taken from borders that are the topmost and the leftmost.
So the topmost, which is red, wins out.
One way to override this may be to use cell for the color to win over the color for the row.
The rules that have higher precedence than this “same color rule is”
wider border wins over narrower ones
and after that,
double wins over solid, then dashed, dotted, ridge, outset, groove, inset
You can use 2px for the gold for it to win over, and I tried in Chrome to use
double, and it appears as
1px solid and it will win over the red as well. Although if you want to use this method, then it may be best to make sure the browsers you support behave the same using this technique.