У меня есть таблица с width: 100% и элемент в этой таблице с width: 40em; max-width: 100%, но элемент все равно растягивает таблицу, когда окно браузера становится слишком маленьким.
Я хочу, чтобы этот элемент был фиксированной шириной, но не больше контейнера, если контейнер становится слишком маленьким. Если места для фиксированной ширины недостаточно, max-width: 100% должен сделать его меньше, чтобы соответствовать доступному пространству. Это работает за пределами таблицы.
Обратите внимание, что max-width не находится в самой таблице. Это на самом деле элемент <input>, хотя связанный мной код включает отдельную таблицу с той же проблемой в элементе <span>. Он также содержит поле <input> вне таблицы, которое ведет себя правильно.
Вы должны использовать table-layout: fixed для элемента таблицы, чтобы получить свойства max-width потомков <td>.
Из MDN:
Свойство CSS
table-layoutопределяет алгоритм, который будет использоваться для расположение ячеек таблицы, строк и столбцов.фиксированное значение:
Ширина столбцов и столбцов устанавливается шириной элементов таблицы и столбца или шириной первой строки ячеек. Клетки в последующие строки не влияют на ширину столбцов.
table {
table-layout: fixed;
}
если вы поместите его в элемент, элемент растягивается до max-width: 100%.
Если вы хотите фиксированную ширину, используйте width: 40px (вместо%, проценты используются в жидких макетах)