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

我在表格中重复线性渐变时遇到问题。基本上，我不能让桌子看起来漂亮，尤其是在Chrome上。即使我将上述规则应用于tr元素，它看起来像td元素继承了它，而不是具有连续的条纹，我得到了“锯齿”条纹（=条纹不在单元格边界上继续）

这里有一个代码笔来说明这个问题：

使用Chrome，它看起来非常糟糕。对于Firefox来说，几乎不错，但并不完全正确（有时条纹的宽度不同——偏离一个像素——跨越单元格边界）

---

编辑：为了澄清，我需要针对特定的行，而不是整个表。因此，设置tr样式的要点实际上是相关的。

能否将.striped类移到表中而不是行中

<table class="striped">
  <tr >
    <td>hi</td>
    <td>there</td>
    <td>dear css observer</td>
  </tr>
</table>

你好
那里
亲爱的css观察员：

---

代码笔：

强大的

:before/：after

…对行来说没有那么强大。
下面的解决方案在Fx和Chrome的简单示例中效果很好（尽管只适用于

：after

，因为如果您使用

：before

-请参阅fiddle中的注释），但如果您添加了第一个非条带行，那么只有Firefox可以很好地发挥作用，因为它同时允许

tr{position:relative}

和

表{position:relative}

虽然Chrome不喜欢前一条规则，但使用后一条规则，它显然会将整个表条带化

相关CSS：

table {
  position: relative;
}
.striped:after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0; left: 0; right: 0; /* Whole area of tr */
  background: repeating-linear-gradient(
        45deg,
        #FFFFFF,
        #FFFFFF 10px,
        #DDDDDD 10px,
        #DDDDDD 20px
    )
}

---

编辑：宽度为2000%的条纹行的第一个单元格上的伪：（第三个示例中的Chrome不喜欢填充，而边框间距可以。我的计算机上的宽度很奇怪）

您可以尝试通过将其显示模式从

表格单元格更改为
内联块来打破
的恼人行为

明显的缺点是需要预定义的宽度（每一个tds、每一列或每一个td等）

只需检查此解决方案是否破坏了布局中的某些内容（但由于
仍然是
显示：表格；
和
仍然是
显示：表格行
，因此根据您的设计，此更改可能会产生最小到零的影响）




td{
填充：10px；
显示：内联块；
宽度：30%；
}
。鉴于这是2010年首次报告的（当时Gecko实际上也有相同的bug），并且当前标记为
WONTFIX
，我不会屏息等待真正的修复。你可以打开一个新bug，现在可能是“可行的”

作为一种解决方法：将条纹放在
表上
，以免混淆渲染机制，然后取消其他行的样式设置，而不是将行设置为“待条纹”，如下所示：

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 */
}

通过这种方式，它仍然可以像只高亮显示指定的行一样工作。如果由于某种原因，在未设置样式的行后面有一个非不透明的背景，则可能会因为此错误而运气不佳

.在IE、FF和Chrome中工作相同，没有“hickups”。
回答另一个问题（），我找到了这个问题，所以让我也在这里发布我的答案

不久前，我遇到了同样的问题……我找到的唯一解决方案是将
tr
a
display:block
。它可以工作，但可能会导致一些布局问题


您可以定义
后台附件：fixed；
到
tr
，正如您在这个更新的代码笔上看到的那样

这个解决方案是由Chris Coyier在这里提出的
寻找时髦的小镇

当你滚动页面时，渐变将保持不变，但它比“锯齿”样式要好。
可能重复@DavidKhasikyan这个问题是关于google chrome中表格样式的一个特定问题。它不是给定问题的重复。使用7个字符的单元格更糟糕。
td{background:transparent}
或“无”都没有帮助。嗯……不幸的是，没有，我需要以这种方式突出显示特定的行。没有给出标记为
WontFix
的理由，我建议打开一个新的。这对我来说非常有效。不确定为什么这不是答案（除非太晚了）。。。
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 */
}

tr {
    color: white;
    background: linear-gradient(to bottom right, blue, red);
    position: relative;
    display: block;
}

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