Can I fill a table cell with a rect?

Community Help
1

Hi, I am not quite sure how to phrase this, so I also wasn’t able to look for examples here.

I have a table and I would like to have a rect inside, actually two, like a single stacked barchart.
And I want it to fill the whole cell but not be bigger so that it would squish the rest.

Is that possible?

2

Do you mean like this?

https://observablehq.com/d/d92d3652004bf073

… I am not expert as CSS, so I imagine the visuals can be better… this response is intended to keep the conversation moving and to ask your help to further clarify your request. :slight_smile:

1 Like
3

Hi Aaron

thanks a lot! thats actually exactly how I’m doing it right now, I just thought maybe there is some more dynamic way I could do this with d3 and svgs. But probably was overthinking this.

4

I’m not sure what your objective is but I think that it’s worth mentioning that HTML tables are designed to display tabular data; they are not designed for layout. As such, it’s generally discouraged to use them for layout for reasons outlined on MDN’s Table documentation. On that same page, you can find plenty of examples on table styling to use, for example, color to highlight groups, rows, or columns within a table, which might be close to what you want to to do.

2 Likes
5

Thanks a lot for making me aware of this.
I do not intend to use it for layout purposes.
My table is a data table, but there are some summary sparklines here and there and I found that I can probably add a lot by showing a ratio as a horizontal barchart, where one can directly compare the rows one after another without gaps.

I see it now, and I am not 100% though that its that good looking. The main reason was that I thought one can easily compare two rows.

I.e. Oversight first, details on demand.

6

Oops I’m late, found this open in an old tab… here are a few approaches:

1 Like