Таблица HTML - максимальная ширина не работает на потомках td

У меня есть таблица с width: 100% и элемент в этой таблице с width: 40em; max-width: 100%, но элемент все равно растягивает таблицу, когда окно браузера становится слишком маленьким.

Я хочу, чтобы этот элемент был фиксированной шириной, но не больше контейнера, если контейнер становится слишком маленьким. Если места для фиксированной ширины недостаточно, max-width: 100% должен сделать его меньше, чтобы соответствовать доступному пространству. Это работает за пределами таблицы.

Обратите внимание, что max-width не находится в самой таблице. Это на самом деле элемент <input>, хотя связанный мной код включает отдельную таблицу с той же проблемой в элементе <span>. Он также содержит поле <input> вне таблицы, которое ведет себя правильно.

ссылка на jsfiddle

Ответ 1

Вы должны использовать table-layout: fixed для элемента таблицы, чтобы получить свойства max-width потомков <td>.

Из MDN:

Свойство CSS table-layout определяет алгоритм, который будет использоваться для расположение ячеек таблицы, строк и столбцов.

фиксированное значение:
Ширина столбцов и столбцов устанавливается шириной элементов таблицы и столбца или шириной первой строки ячеек. Клетки в последующие строки не влияют на ширину столбцов.

table {
    table-layout: fixed;
}

РАБОЧИЙ ДЕМО.

Ответ 2

если вы поместите его в элемент, элемент растягивается до max-width: 100%.

Если вы хотите фиксированную ширину, используйте width: 40px (вместо%, проценты используются в жидких макетах)