HTML Table - max-width not working on td descendants

Question

I have table with width: 100% and an element in that table with width: 40em; max-width: 100%, but the element is still stretching the table when th

Answer 1

You should use table-layout: fixed for the table element to get the max-width properties of <td>'s descendants to work.

From the MDN:

The table-layout CSS property defines the algorithm to be used to layout the table cells, rows, and columns.

fixed value:
Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

table {
    table-layout: fixed;
}

WORKING DEMO.

Answer 2

if you put it on the element, the element gets stretched to max-width: 100%.

If you want fixed width, use width: 40px (instead of %, percentages are used in liquid layouts)