Eu tenho uma tabela HTML com bordas recolhidas e adjacentes e uma borda padrão em todas as células e quero alterar a cor da borda de uma linha específica para outra. O problema é que, quando as bordas são recolhidas e as células vizinhas têm cores diferentes (ou estilos em geral, suponho), o navegador não é renderizado de maneira visualmente aceitáve

Aqui está o meu HTML:

<table>
    <tr><td>Lorem</td><td>Ipsum</td></tr>
    <tr><td>Lorem</td><td>Ipsum</td></tr>
    <tr id="foo"><td>The border of these cells</td>
                 <td>is not uniformly red!</td></tr>
    <tr><td>Lorem</td><td>Ipsum</td></tr>
</table>

The CSS:

table { border-collapse: collapse; border-spacing: 0 }
td { padding: 5px; border: 3px black solid; }
#foo td { border: 3px red solid; }

Há também umJSFiddle do acima.

Como diferentes navegadores o processam:

IE 7 (normas):

IE 8 e 9 (normas):

Firefox 11 (observe o artefato visual sutil na borda vermelha esquerda e a maneira peculiar que escolhe renderizar os cantos):

Chrome 18:

A questão O que posso fazer para obter uma renderização visualmente aceitável? Essa renderização pode ser o ideal de "bordas vermelhas sempre têm precedência sobre bordas pretas"?

Esclarecimento

Estou procurando, acima de tudo, uma solução CSS pur

Se isso não for possível, eu trabalharia com algo que requer modificações pequenas e localizadas (ou seja, algo que eu teria que fazer em todas as tabelas em qualquer lugar).

Javascript é aceitável, pois no site real os estilos que controlam as bordas são aplicados dinamicamente com base na interação do usuário. Os manipuladores de eventos são configurados por código quase idêntico aest.