htmlcsshtml-table

Does the container-type apply to a <td>?


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?


Solution

  • 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.