如何在折叠时修复相邻TD边界的不一致渲染？

Question

我有一个带有折叠和相邻边框的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是可以接受的,因为在实际网站中,控制边框的样式是基于用户交互动态应用的.事件处理程序由与此几乎相同的代码设置.

Answer 1

我没有额外标记来解决这个问题: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/中的示例