问题描述
我在使用表格时遇到了重复线性渐变的问题。基本上,我不能让它看起来不错的表,特别是在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'.
这篇关于如何使表的重复线性梯度在多个单元格上无缝连续?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!