I have a fairly complicated table, and it's vital that the size of all my table cells be strictly controlled without any regard for their contents. Instead, I want to resize the contents to the cell. It seemed to make sense to make my <td>
elements styled using container-type
:
.mytable td {
container-type: size;
height: calc(...);
width: calc(...);
}
That way I could use container measurements for elements inside the <td>
:
.mytable td > * {
font-size: 50cqw;
}
But this appears to be having no effect--the <td>
isn't registering as a container, and the font sizes appear to be based on the whole table's size instead.
Does container-type
just not apply to <td>
elements? Do I need to put another <div>
inside, so that they'll behave more like I expect?
From the Containment specification:
However, giving an element size containment has no effect if any of the following are true:
if the element does not generate a principal box (as is the case with display: contents or display: none)
if its inner display type is table
if its principal box is an internal table box
if its principal box is an internal ruby box or a non-atomic inline-level box
So no, if the td is its default display:table-cell
, size containment will have no effect.