将渐变应用于 html/css 中的 table 背景

Question

我正在尝试设计我的响应式 table 并希望背景由渐变组成。我的问题是所有应用的样式在每个单元格中都会重复出现，因此它看起来像一个可怕的图像被复制了。

我使用的渐变：

background: linear-gradient(to right, rgb(170, 7, 107), rgb(97, 4, 95));

Table:

我知道 table 中有许多 td/th 元素，它可以采用自己的风格，但我如何使每一行的颜色保持一致？

Codepen

谁能指导我正确的方向？

Answer 1

您可以添加

background-attachment: fixed;

定义渐变的位置。 如果你水平滚动它可能看起来有点不对劲，但这样它会使用浏览器的左右边缘来生成渐变。