如何解决相邻TD边界在折叠时不一致的呈现？ [英] How to fix inconsistent rendering of adjacent TD borders when they are collapsed?

问题描述

我有一个HTML表格，在所有单元格上都有折叠和相邻的边框和标准边框，我想将特定行的边框颜色更改为其他边框。问题是，当边框折叠和相邻单元格有不同的颜色（或一般我假设样式），浏览器不会以视觉可接受的方式呈现。

strong>这是我的HTML：

 < table& 
< tr>< td> Lorem< / td>< td> Ipsum< / td>< / tr> 
< tr>< td> Lorem< / td>< td> Ipsum< / td>< / tr> 
< tr id =foo>< td>这些单元格的边框< / td> 
< td>不一致的红色！< / 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; } 
  
还有一个几乎相同的代码设置。
解决方案
我来到这个解决方案没有额外的标记： http： //jsfiddle.net/fcalderan/PAJzK/12/  
 
 
 
这个想法是避免使用 border-collapse 并为表格元素使用边框 top / right 和左下角 > 
 
 
尝试使用IE8，FX11和CH17，下面是相关的CSS 
  
 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-colored使用：before pseudoelement * / 
 #foo td：first-child：before {
 content：; 
 position：relative; 
 margin-left：-8px; 
 padding：8px 0 8px 5px; 
 border-left：3px red solid; 
} 
 
 / *下一行的顶部边框红色* / 
 #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/  
 
I have an HTML table with collapsed and adjacent borders and a standard border on all cells and I want to change the border color of a specific row to something else. The problem is that when the borders are collapsed and neighboring cells have different colors (or styles in general I assume) the browser does not render in a visually acceptable manner.

Here's my 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>
The CSS:
table { border-collapse: collapse; border-spacing: 0 }
td { padding: 5px; border: 3px black solid; }
#foo td { border: 3px red solid; }
There is also a JSFiddle of the above.

How different browsers render it:

IE 7 (standards):



IE 8 and 9 (standards):



Firefox 11 (note the subtle visual artifact on the left red border and the quirky way it chooses to render the corners):



Chrome 18:



The question: What can I do to get a visually acceptable render? Can that render be the ideal of "red borders always take precedence over black ones"?

Clarification:

I am first and foremost looking for a pure CSS solution.

If this is not possible, I would work with something that requires small and localized modifications (i.e. not something I 'd have to do on every table everywhere).

Javascript is acceptable, since in the actual website the styles that control the borders are applied dynamically based on user interaction. The event handlers are set up by code almost identical to this.
解决方案
I came to this solution without extra-markup : http://jsfiddle.net/fcalderan/PAJzK/12/

the idea is to avoid using border-collapse and using border top/right for table cells and border bottom-left for table element.

tried with IE8, FX11 and CH17, here's the relevant 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;  
}
here an issue occurs if the highlighted row is the last one: in that case #foo + tr td wouldn't match anything : in that case you could write instead this rule
#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;
}
see example in http://jsfiddle.net/fcalderan/PAJzK/14/ 

                        
这篇关于如何解决相邻TD边界在折叠时不一致的呈现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！