5

我有一个带有折叠和相邻边框的 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 7 标准

IE 8 和 9（标准）：

IE 8、9 标准

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

法拉盛 11

铬 18：

铬 18

问题：我能做些什么来获得视觉上可接受的渲染？那个渲染可以是“红色边界总是优先于黑色边界”的理想吗？

澄清：

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

如果这是不可能的，我会处理一些需要小的和本地化修改的东西（即不是我必须在任何地方的每张桌子上做的事情）。

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

4

2 回答 2

7

我来到这个解决方案没有额外的标记：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/中的示例

于 2012-03-29T11:15:26.467 回答
1

您需要额外的标记，例如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 规范在其边界冲突解决规则中对此有要求，但它们并没有被普遍实施——在这种情况下，他们说上排单元格的边界获胜（就像在您测试的大多数浏览器中一样） ，因此没有直接的方法来指定您描述的渲染。也就是说，无论如何您都需要在前一行设置一些样式。

于 2012-03-29T11:01:35.527 回答