Tabela HTML - maksymalna szerokość nie działa na td potomkach

Question

Mam tabelę z width: 100% i element w tej tabeli z width: 40em; max-width: 100%, ale element wciąż rozciąga stół, gdy okno przeglądarki staje się zbyt małe.

Chcę, aby ten element miał stałą szerokość, ale nie był większy niż kontener, jeśli kontener jest zbyt mały. Jeśli nie ma wystarczająco dużo miejsca na ustaloną szerokość, max-width: 100% powinien zmniejszyć rozmiar, aby zmieścił się w dostępnej przestrzeni. Działa to poza stołem.

Należy pamiętać, że max-width nie znajduje się na samym stole. W rzeczywistości jest to element <input>, chociaż kod, który podłączyłem, zawiera osobną tabelę z tym samym problemem na elemencie <span>. Zawiera również pole <input> poza tabelą, które zachowuje się poprawnie.

link to jsfiddle

Answer 1

Należy użyć table-layout: fixed dla elementu tabeli, aby uzyskać max-width właściwości potomków <td> „s do pracy.

Z MDN:

table-layout właściwość CSS określa algorytm, który będzie używany do układ komórek tabeli, wierszy i kolumn.

stałym wartość:
szerokości stołowe i kolumna są przez szerokości elementów tabeli Col lub szerokość pierwszego rzędu komórek. Komórki w kolejnych wierszach nie mają wpływu na szerokości kolumn.

table { 
    table-layout: fixed; 
} 

WORKING DEMO.

Answer 2

jeśli umieścić go na elemencie, element zostanie rozciągnięty do max-width: 100%.

Jeśli chcesz stałej szerokości znaków, należy width: 40px (zamiast%, procenty są wykorzystywane w układach ciekłych)