These days it is not uncommon for data tables to contain more complex UI elements (i.e. not just data), with things like pills (or tags), call-to-action buttons, icons, and even graphs & charts (e.g. sparklines) to be embedded.
However, I haven't actually seen the specific behaviour for these embedded UI elements specified in the context of an child element in a table cell.
So the question is, what happens to a progress bar (and other UI elements) when the table row cycles through different states (e.g. hover-over, active, selected, etc.) and how does the styling and behaviour change compared to when they are outside of a table?
A specific example of this is to consider what happens to a table cell containing a progress bar (which is actually not an uncommon thing to see) if it is selected. Should it be:
If you can include any screenshots of actual examples of applications (rather than CodePen or design concepts) that would be very useful for illustrating the answer.