如何使表格的重复线性渐变在多个单元格上无缝连续？

Question

我在使用表格重复线性渐变时遇到了麻烦.基本上,我不能让它看起来很漂亮,特别是在Chrome上.即使我将所述规则应用于tr元素,它看起来像td元素继承它而不是连续条纹,我得到'锯齿'的(=条纹不会继续通过单元格边框).

.striped {
  background: repeating-linear-gradient(
    45deg,
    #FFFFFF,
    #FFFFFF 10px,
    #DDDDDD 10px,
    #DDDDDD 20px
)}

这是Codepen说明问题:

http://codepen.io/merryprankster/pen/bpeCc

使用Chrome,它看起来非常糟糕.使用Firefox,差不多但不完全(有时条纹宽度不同 - 偏离一个像素 - 跨越单元边界).

编辑:澄清一下,我需要定位一个特定的行,而不是整个表.所以是的,关于样式化tr的观点实际上是相关的.

Answer 1

这是Chrome中已确认的错误.鉴于它是在2010年首次报道(当Gecko实际上有相同的错误)并且目前已经标记出来,WONTFIX我不会屏住呼吸进行真正的修复.你可以打开一个新的bug,它现在可能是"可行的".

作为一种解决方法:将条纹放在上面,table以免混淆渲染机制,然后取代对'要条纹'的行进行样式化,取消其他行的设计,如下所示:

table.striped {
  background: repeating-linear-gradient(
        45deg,
        #FFFFFF,
        #FFFFFF 10px,
        #DDDDDD 10px,
        #DDDDDD 20px
  );
}
tr:not(.striped) {
  background:white; /* or any color that would normally be behind the table */
}

这样它仍然可以像你想要突出显示指示的行一样工作.如果出于某种原因,在没有样式的行后面有一个非透明的背景,你可能因为这个bug而运气不好.

更新了codepen.在IE,FF和Chrome中完全相同,没有'hickups'.