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 the browser window gets too small.

I want this element to be a fixed width but not be larger than the container if the container gets too small. If there's not enough room for the fixed width, max-width: 100% should make it smaller to fit the available space. This works outside of a table.

Note that the max-width is not on the table itself. It is actually on an <input> element, although the code I've linked includes a separate table with the same problem on a <span> element. It also includes an <input> field outside of the table which behaves correctly.

link to jsfiddle

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.