跨越表格行的CSS3线性渐变

Question

我想使用 linear-gradient 将表格行制作成进度条。我将样式应用于行，但它的效果好像应用到了行中的每个单元格上。请问正确的做法是什么？

示例：

<table>
    <tr style="background: linear-gradient(to right, #FF0000 35%, #FFF 35%)">
      <td>Column1</td>
      <td>Column2</td>
      <td>Column3</td>
    </tr>
</table>

Fiddle: https://jsfiddle.net/b4y2nue9/

- ddinchev

---

你要用这个发邮件吗？ - Asons

可能是 https://dev59.com/jJDea4cB1Zd3GeqPfbU9#33492701 的重复问题（请查看 background-attachment:fixed）。 - Harry

@Harry 很有趣，我最初使用了 background-attachment:fixed，但是除非表格的宽度设置为100％，否则它不起作用...我现在发现如果将渐变放到表格上，它确实可以起作用...我正在考虑更新我的答案，以便每行可以有不同的渐变。 - Asons

Answer 1

根据@Harry的评论和问题可能是一个重复问题，我修改了答案。

由于@Harry在这里给出了一个好的答案，我的回答将是对此的扩展，我专注于如何在不占满视口宽度的表格的每一行上设置不同的渐变。

使其正常工作的关键是使用视口单位设置表格宽度，这样可以将相同的宽度设置为第一个td上的绝对定位伪元素，当在td上设置position:relative时，这将正常工作，但在tr（请参见规范）上设置时无效。

这是使用外部 CSS 的版本。

table {
  width: 50vw;
}
td {
  position: relative;
}
tr:nth-child(1) td:first-child::after {
  content: '';
  display: block;
  position: absolute;
  left: 0; top: 0;
  width: 50vw; bottom: 0;  
  background: linear-gradient(to right, #FF0000 35%, #FFF 35%);
  z-index: -1;
}
tr:nth-child(2) td:first-child::after {
  content: '';
  display: block;
  position: absolute;
  left: 0; top: 0;
  width: 50vw; bottom: 0;  
  background: linear-gradient(to right, #00FF00 35%, #FFF 35%);
  z-index: -1;
}

<table>
    <tr>
      <td>Column1</td>
      <td>Column2</td>
      <td>Column3</td>
    </tr>
    <tr>
      <td>Column1</td>
      <td>Column2</td>
      <td>Column3</td>
    </tr>
  </table>

---

这是一个使用 div 的版本，如果需要使用内联 CSS。

<table style="width: 50vw">
    <tr>
      <td style="position: relative">
        <div style="position: absolute; left: 0; top: 0; width: 50vw; bottom: 0; background: linear-gradient(to right, #FF0000 35%, #FFF 35%); z-index: -1;"></div>
      
        Column1</td>
      <td>Column2</td>
      <td>Column3</td>
    </tr>
    <tr>
      <td style="position: relative">
        <div style="position: absolute; left: 0; top: 0; width: 50vw; bottom: 0; background: linear-gradient(to right, #00FF00 35%, #FFF 35%); z-index: -1;"></div>
      
        Column1</td>
      <td>Column2</td>
      <td>Column3</td>
    </tr>
  </table>

- Asons

Answer 2

你可以在你的 tr 上使用 display: block，它会实现你想要的效果。

CSS

tr {
  display: block;
  background: linear-gradient(to right, #FF0000 35%, #FFF 35%)
}

https://jsfiddle.net/1z4e4gdz/

- Maher Fattouh