How do I add a gradient background color to an item in the table according to scale?

the figure above is a circular table (using vue), one of the fields is probability, how to add background color to the corresponding row in the table according to the numerical value of probability? For example, the probability value is 50%, then I will add a background color to half of the table, and the background color is gradual, please give me some ideas.

Css3 css vue.js

Mar.13,2021

suppose the loop is tr, using background-size to set the width

<tr v-for="item in rows" :style="background: 'linear-gradient(left, -sharp1edf17, -sharp1edf17, -sharp3ceded, -sharp5d83ff)', background-size: item.gailv + ' 100%'">
    <td></td>...
</tr>

https://jsfiddle.net/5ac7uwyg/

Previous: There are many warning in the console after using the Menu component in antd ui in react.

Next: A question about finditer output in regularization

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e43d9e-65082.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e43d9e-65082.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?