Установите <tr>линейный градиент справа налево

Question

Я хочу установить tr background-color в процентах. Так что я использовал стиль background-image: linear-gradient(green, green) для своего тр. Проблема в том, что background-image начинаются слева, и я хочу заполнить цвет справа налево. Это мой стиль:

.table-row {
  background-image: linear-gradient(green, green);
  background-size: 24%;
  background-repeat: no-repeat;
}

Как мне это решить? Рабочая jsfiddle https://jsfiddle.net/h8vLd4sq/

Answer 1

Это то, что вам нужно?

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.table-row {
  background: linear-gradient(to right, white 60%, green 10%);
  background-repeat: no-repeat;
}

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-row">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Answer 2

вы можете добавить градус, чтобы установить вращение https://jsfiddle.net/4mLdozyp/1/

   .table-row {
     background-image: linear-gradient(-90deg,green 33%, white 0%);
     background-repeat: no-repeat;
}