如何在折叠时修复相邻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 of the above。

不同的浏览器如何呈现它：

IE 7（标准）：

IE 8和9（标准）：

Firefox 11（注意左侧红色边框上的微妙视觉效果及其选择渲染角落的古怪方式）：

Chrome 18：

问题：如何才能获得视觉上可接受的渲染效果？这可以渲染出“红色边框总是优先于黑色边框”的理想吗？

澄清：

我首先寻找纯CSS解决方案。

如果无法做到这一点，我会处理一些需要进行小规模和局部修改的事情（即不是我在每个桌子上都必须做的事情。）

Javascript是可以接受的，因为在实际网站中，控制边框的样式是根据用户交互动态应用的。事件处理程序的设置与this几乎完全相同。

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/

中的示例

Answer 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规范在其border conflict resolution rules中对此有要求，但它们并未普遍实现 - 在这种情况下，它们表示上排单元格的边界获胜（如在大多数浏览器中测试的那样） ），因此没有直接的方法来指定您描述的渲染。也就是说，无论如何，您还需要在前一行设置一些样式。