У меня есть HTML-таблица со свернутыми и смежными границами и стандартной границей для всех ячеек, и я хочу изменить цвет границы определенной строки на что-то другое. Проблема в том, что когда границы свернуты, а соседние ячейки имеют разные цвета (или, как я полагаю, стили), браузер не отображает визуально приемлемым способом.

Вот мой 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>

CSS:

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

Также естьJSFiddle из вышеперечисленного.

Как это делают разные браузеры:

IE 7 (стандарты):

IE 8 и 9 (стандарты):

Firefox 11 (обратите внимание на тонкий визуальный артефакт на красной границе слева и причудливый способ визуализации углов):

Chrome 18:

Вопрос: Что я могу сделать, чтобы получить визуально приемлемый рендер? Может ли это быть идеалом «красные границы всегда имеют приоритет над черными»?

Разъяснение:

Я в первую очередь ищу чистое решение CSS.

Если это невозможно, я бы работал с чем-то, что требует небольших и локализованных модификаций (то есть не то, что я должен был бы делать на каждом столе везде).

Javascript является приемлемым, поскольку на реальном веб-сайте стили, управляющие границами, применяются динамически в зависимости от взаимодействия с пользователем. Обработчики событий устанавливаются кодом, практически идентичнымэто.