¿Cómo arreglar la representación inconsistente de los bordes adyacentes de TD cuando se colapsan?

Tengo una tabla HTML con bordes colapsados y adyacentes y un borde estándar en todas las celdas y quiero cambiar el color del borde de una fila específica a otra. El problema es que cuando los bordes se contraen y las celdas vecinas tienen colores diferentes (o estilos en general, supongo), el navegador no se visualiza de una manera visualmente aceptabl

Aquí está mi 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; }

También hay unaJSFiddle de lo anterior.

Cómo los diferentes navegadores lo procesan:

IE 7 (estándares):

IE 8 y 9 (estándares):

Firefox 11 (tenga en cuenta el sutil artefacto visual en el borde rojo izquierdo y la peculiar forma en que elige renderizar las esquinas):

Chrome 18:

La pregunta ¿Qué puedo hacer para obtener un renderizado visualmente aceptable? ¿Puede ese renderizado ser el ideal de "los bordes rojos siempre tienen prioridad sobre los negros"?

Aclaración

n primer lugar, estoy buscando una solución CSS pura.

Si esto no es posible, trabajaría con algo que requiera modificaciones pequeñas y localizadas (es decir, algo que no tendría que hacer en todas las mesas en todas partes).

Javascript es aceptable, ya que en el sitio web real los estilos que controlan los bordes se aplican dinámicamente en función de la interacción del usuario. Los controladores de eventos están configurados por código casi idéntico aest.

Respuestas a la pregunta(4)

Su respuesta a la pregunta