How to solve the problem with tables?

Question

css

Hello.

it is not possible to make a similar implementation as in the picture. Price levels can be done at the expense table, but using the table there is no way to make flat volumes ( green, red from right to left ).

Problem: When an element is added to the strip, the table perceives it as another cell and everything is shifted, even if you do it display: absolute. The size of the strip varies from volume 0 - 1, where 1 - 100%.

I tried to do it through a gradient, such a solution turned out. Didn't think of anything better.

The levels themselves are not difficult to make:

<!--Красные уровни-->
<table>
<tbody>
  <tr>
    <td>163</td>
    <td>0.00324</td>
    <td>50</td>
    <td>50</td>
  </tr>
</tbody>

<!--Центр-->
<tbody>
  <tr>
    <td>Spread, USDT</td>
    <td>0.0001</td>
    <td>0.31%</td>
  </tr>
</tbody>

<!--Зеленые уровни-->
<tbody>
  <tr>
    <td>695</td>
    <td>0.00323</td>
    <td>215</td>
    <td>215</td>
  </tr>
</tbody>
  
 </ table>

Answer 1

normal gradient

( https://cssgradient.io/ )