How do I make a perfect colored circle inside an HTML table cell that stays round and scales with the table?

All the circle-inside-table-cells solutions I see require me to specify the widths and heights of the table, or elements of it, with pixels. I tend to specify table/table-element sizes with percentages. That way I can expect a user to be able to shrink their browser window and everything adjusts responsively.

I need perfect colored circles inside some of my table elements. It would be nice if there was centered text in it, but that is unimportant compared to just having a circle. That said, if there was text it would only be a couple characters max. I really just need the circles now and I'm guessing the text is a lot more complex so we can ignore that for now, unless it's easy enough to include.

How can I create circles that stay round and shrink/expand according to whatever available height there is in the table cell? If a table cell is wide and short, the circle would have more space to either side of it, as an example, but stay round.

I am not at all against using svg or something similar... or even a graphic... if that makes this work. However, my table dynamically renders with React and I'll be dynamically applying a class or id to cause the circles to appear and disappear. So that has to be possible, and I'm not sure how that would work with svg or an equivalent or a graphic