CODEWITHSUNDEEP
htmlcssbackground-imagelinear-gradients
BeHappy
BeHappy

Reputation: 3998

Set <tr> linear-gradient from right to left

I want to set tr background-color based on percentage. So I used background-image: linear-gradient(green, green) style for my tr. The problem is background-image start from left and I want to fill color from right to left. This is my style:

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

How can I solve it? Working jsfiddle https://jsfiddle.net/h8vLd4sq/

Upvotes: 0

Views: 151

Answers (2)

Manjuboyz
Manjuboyz

Reputation: 7056

Is this what you need?

.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>

Upvotes: 1

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17610

u can add degree to set rotation https://jsfiddle.net/4mLdozyp/1/

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

Upvotes: 0

Related Questions