Css 如何修复折叠时相邻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>

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

还有一个问题

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

<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>

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

IE 7（标准）：

IE 8和9（标准）：

Firefox 11（注意左侧红色边框上微妙的视觉伪影，以及它选择的渲染角的古怪方式）：

铬18：

问题：如何获得视觉上可接受的渲染？那会是“红边总是优先于黑边”的理想吗

澄清：

<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>

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

我首先要寻找一个纯CSS解决方案

如果这是不可能的，我将使用一些需要小的局部修改的东西（即，我不必在任何地方的每张桌子上都做这些事情）

---

Javascript是可以接受的，因为在实际的网站中，控制边界的样式是基于用户交互动态应用的。事件处理程序由与几乎相同的代码设置。

您需要额外的标记，例如，在前一行上设置foo之前的

id，在下一行上设置foo之后的
id，并添加样式表，如

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

演示：

单元格角落仍然可能存在问题（角落可能是黑色的）

之所以不能用一种更简单的方法来实现这一点，是因为边界崩溃的影响在浏览器中定义模糊，实现不一致。CSS 2.1草稿甚至在这种依赖于浏览器的情况下用于保留颜色。尽管最终的CSS 2.1规范在its中对此有要求，但它们并不是普遍实现的，在本例中，它们说上面一行的单元格边界获胜（与您测试的大多数浏览器一样），因此无法直接指定您描述的渲染。也就是说，您仍然需要在前一行上设置一些样式。
我使用此解决方案时没有额外的标记：

这样做的目的是避免对表格单元格使用边框收拢，对表格元素使用边框上/右，而对表格元素使用边框收拢

使用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;
}

请参见
中的示例，将包装器元素插入单元格是否可以接受？还是设置宽度、高度或单元格？@FabrizioCalderan：这只是最后的选择。如果可能的话，我想要一个能与现有标记一起工作的解决方案。谢谢你富有想象力的方法！很高兴有用，但老实说，我喜欢这类问题，它们也让我想到了其他方法。说实话，我不相信最终会使用它，因为我还有一些问题中没有提到的附加“软”要求，但你的解决方案a）很有趣，b）强调了我可能应该考虑在没有折叠边框的情况下工作的结论。实现这种效果的最简单方法可能是包装选定单元格的内部内容并制作一个内部边框，但如果我想不出有趣的解决方案，你会让我失去日常乐趣：）