html - CSS Background-Size doesn't work with static color

Question

I am very bad in CSS and I need to accomplish something complicated for me.

I got a table with data and I have a column where I have something like Qty Assigned / Qty Requested. I calculate the % assigned so 5 assigned of 10 will be 50%. Now, I want to put a background-color on the TD who match the %. So 50% will be half of the TD in let's say red.

I have tried to use background-color: red; background-size: <?php echo $BgPct; ?>%; but it doesn't work.

Anyone have solutions ? I can use whatever. I have jQuery also. I don't care if it's CSS1/2/3, but it need to be accurate so 66% isn't a background picture of 75%.

Answer 1

You can use linear-gradient for this

For example, if you need 50% of red

td {
  background: linear-gradient(to right, red 50%, transparent 0);
}

Demo:

table {
  border-collapse: collapse;
}

td {
  border: 1px solid gray;
  padding: 10px;
}

.half {
  background: linear-gradient(to right, red 50%, transparent 0);
}

.one-third {
  background: linear-gradient(to right, red 33.33%, transparent 0);
}

.three-quarters {
  background: linear-gradient(to right, red 75%, transparent 0);
}

<table>
  <tr>
    <td class="half">50%</td>
  </tr>
  <tr>
    <td class="one-third">33%</td>
  </tr>
  <tr>
    <td class="three-quarters">75%</td>
  </tr>
</table>