How to create a cell that overlaps another?

Question

I need to create a cell with the total size of the existing col, and this cell will be on top of the nearest cell.

The purpose of this is to create a kind of percentage graph.

Example:

I've already tried for absolute position in tr, or in td, however, the width 100% is never equal to the width of the table, it always exceeds it.

Answer 1

It's an interesting task to do.

I did it using HTML and CSS. You can use javascript as well.

In the following solution width is static, but you can pass dynamic width,

I hope you will have your own width calculation logic, or either you can convert it into a percentage and increase-decrease bar width accordingly.

here is the link to Sandbox solution https://codesandbox.io/s/table-showing-percentage-2ovpec?file=/src/index.js