Tabella HTML - larghezza massima non funzionante sui discendenti td

Question

Ho una tabella con width: 100% e un elemento in quella tabella con width: 40em; max-width: 100%, ma l'elemento sta ancora allungando la tabella quando la finestra del browser diventa troppo piccola.

Voglio che questo elemento sia una larghezza fissa ma non sia più grande del contenitore se il contenitore diventa troppo piccolo. Se non c'è spazio sufficiente per la larghezza fissa, lo max-width: 100% dovrebbe ridurlo per adattarsi allo spazio disponibile. Questo funziona al di fuori di un tavolo.

Si noti che lo max-width non si trova sul tavolo stesso. In realtà si trova su un elemento <input>, sebbene il codice che ho collegato includa una tabella separata con lo stesso problema su un elemento <span>. Include anche un campo <input> al di fuori della tabella che si comporta correttamente.

link to jsfiddle

Answer 1

Si dovrebbe usare table-layout: fixed per l'elemento tabella per ottenere le max-width proprietà dei discendenti <td> s' al lavoro.

Dal MDN:

La proprietà CSS table-layout definisce l'algoritmo da utilizzare per la layout celle di tabella, righe e colonne.

fisso valore:
Tabella delle larghezze sono definiti dalle larghezze di elementi di tabella e col o dalla larghezza della prima fila di celle. Le celle nelle righe successive non influiscono sulle larghezze delle colonne.

table { 
    table-layout: fixed; 
} 

WORKING DEMO.

Answer 2

se lo metti su l'elemento, l'elemento ottiene teso a max-width: 100%.

Se volete larghezza fissa, utilizzare width: 40px (anziché%, le percentuali sono utilizzati nei layout liquidi)