Как исправить несогласованный рендеринг смежных границ TD, когда они свернуты?

У меня есть 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 является приемлемым, поскольку на реальном веб-сайте стили, управляющие границами, применяются динамически в зависимости от взаимодействия с пользователем. Обработчики событий устанавливаются кодом, практически идентичнымэто.

 fcalderan29 мар. 2012 г., 12:47
было бы приемлемо вставить элемент оболочки в ячейки? или настройка ширины и высоты или ячеек?
 Jon29 мар. 2012 г., 12:53
@FabrizioCalderan: Только в крайнем случае. Я хотел бы решение, которое работает с существующей разметкой, если это вообще возможно.

Ответы на вопрос(2)

настройка, напримерid=before-foo в предыдущем ряду иid=after-foo на следующем, с добавлением таблицы стилей, как

#before-foo td {
  border-bottom-color: red; }
#after-foo td {
  border-top-color: red; }

Демо-версия:http://jsfiddle.net/8C8Rd/

Могут быть проблемы с углами ячейки (угол может быть черным).

Причина, по которой это не может быть сделано более простым способом, заключается в том, что эффект коллапса границы был неопределенно определен и непоследовательно реализован в браузерах. Черновики CSS 2.1 даже используются, чтобы оставить цвет в ситуациях, подобных этому зависящему от браузера. Хотя окончательная спецификация CSS 2.1 содержит требования кправила разрешения пограничных конфликтовони не реализованы повсеместно - и в этом случае они говорят, что граница ячеек верхнего ряда выигрывает (как в большинстве браузеров, которые вы тестировали), поэтому нет прямого способа указать рендеринг, который вы описываете. То есть вам все равно нужно будет установить некоторые стили в предыдущем ряду.

 Jon30 мар. 2012 г., 13:24
Спасибо за ваш вклад.
Решение Вопроса

http://jsfiddle.net/fcalderan/PAJzK/12/

идея состоит в том, чтобы избежать использованияborder-collapse и используя границуtop/right для ячеек таблицы и границыbottom-left для элемента таблицы.

пробовал с IE8, FX11 и CH17, вот соответствующий CSS

table {  
    border-spacing : 0;
    border-left    : 3px black solid;
    border-bottom  : 3px black solid;
}

td { 
    padding      : 5px; 
    border-right : 3px black solid; 
    border-top   : 3px black solid;
}

#foo td { border-color:red; }


/* border left red-coloured using :before pseudoelement */
#foo td:first-child:before { 
    content       : ""; 
    position      : relative;
    margin-left   : -8px;
    padding       : 8px 0 8px 5px;
    border-left   : 3px red solid;
}

/* top border of next rows red coloured */
#foo + tr td {  
    border-top: 3px red solid;  
}

здесь возникает проблема, если выделенная строка является последней: в этом случае#foo + tr td не будет ничего соответствовать: в этом случае вы можете написать вместо этого правила

#foo td:after {
   content    : "";
   position   : relative;
   margin     : 0 0 0 -8px;
   display    : block;
   width      : 100%;
   height     : 3px; 
   padding    : 0 8px;
   top        : 2px;
   margin-bottom : -6px;
   border-bottom : 3px red solid;
}

см примерhttp://jsfiddle.net/fcalderan/PAJzK/14/

 Jon30 мар. 2012 г., 13:23
Спасибо за творческий подход!
 Jon30 мар. 2012 г., 13:28
Я тоже. Честно говоря, я не верю, что в конечном итоге я буду использовать это, потому что у меня есть некоторые дополнительные «мягкие» требования, не упомянутые в этом вопросе, но ваше решение а) интригующе и б) подчеркивает вывод, что мне, вероятно, стоит заняться работой без свернутых границ.
 fcalderan30 мар. 2012 г., 13:25
рад быть полезным, но если честно, мне нравятся такие вопросы, они заставляют меня думать альтернативные подходы
 fcalderan30 мар. 2012 г., 13:33
Вероятно, самый простой способ добиться этого эффекта - это обернуть внутреннее содержимое выбранной ячейки и создать внутреннюю границу, но если я не могу придумать интригующее решение, вы лишите меня повседневного веселья :)

Ваш ответ на вопрос