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

问题描述

我在使用表格时遇到了重复线性渐变的问题。基本上，我不能让它看起来不错的表，特别是在Chrome。即使我将所述规则应用于 tr 元素，看起来像 td 元素继承它，而不是具有连续的条纹，我得到锯齿状不会继续跨越单元格边界）。

I'm having trouble with repeating-linear-gradient with tables. Basically, I can't make it look nice with tables, especially on Chrome. Even though I apply said rule to a tr element, it looks like td elements inherit it and instead of having a continuous stripes, I get 'jagged' ones (=stripes do not continue over cell borders).

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

这里是一个Codepen说明问题：

Here's a Codepen illustrating the issue:

使用Chrome，看起来真的很可怕。对于Firefox，几乎是好的，但不完全一样（有时条纹的宽度不同，一个像素跨越单元格边界）。

With Chrome, it looks really awful. With Firefox, almost good but not exactly (sometimes the stripes are of different width - off by one pixel - across cell boundaries).

EDIT ：澄清，我需要定位一个特定的行，而不是整个表。

EDIT: to clarify, I need to target a specific row, not whole table. So yes, the point about styling a tr is actually relevant.

推荐答案

的已确认错误。考虑到它是第一次报告在2010年（当Gecko实际上有相同的错误），并目前标记为 WONTFIX 我不会抱着我的呼吸一个真正的修复。

This is a confirmed bug in Chrome. Given that it was first reported in 2010 (when Gecko actually had the same bug) and is currently marked WONTFIX I wouldn't hold my breath for a real fix. You could open a new bug, it might be 'doable' now.

解决方法：将表上的条纹，以免混淆渲染机制，则不是将行设置为条纹，而是对其他行设置 ，如下所示：

As a workaround: put the stripes on the table so as not to confuse the rendering mechanisms, then instead of styling the rows 'to be striped', unstyle the other rows, like this:

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而失去了运气。

This way it still works as if you're highlighting only the indicated row as you intend. If for some reason there is a non-opaque background behind the unstyled rows you're probably flat out of luck because of this bug.

。在IE，FF和Chrome中工作相同，没有'hickups'。

Updated codepen. Works identically in IE, FF and Chrome without 'hickups'.

这篇关于如何使表的重复线性梯度在多个单元格上无缝连续？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！