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>

小提琴： https://jsfiddle.net/b4y2nue9/

Answer 1

根据@Harry's comment问题a possible duplicate

修改了答案

由于@Harry给了good answer here，我的答案将是对此的扩展，我只专注于如何在每个表行上设置不同的渐变，在不是全视口宽度的表上。 / p>

使其工作的关键是使用视口单位设置表格宽度，可以将第一个td上的绝对定位伪元素设置为相同的宽度，这在{ {1}}上设置{1}}，在tr (See spec.)

上设置时无效

这是使用外部CSS的版本

position: relative

td

以下是使用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; }的版本，如果需要使用内联CSS

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

Answer 2

您可以在tr上使用tr { display: block; background: linear-gradient(to right, #FF0000 35%, #FFF 35%) }，并执行您正在寻找的内容

CSS

$errors->first('file')

https://jsfiddle.net/1z4e4gdz/

跨越表行的CSS3线性渐变

2 个答案:

CSS