Как мне использовать атрибуты CSS Min-width и Max-width?

#html #css

#HTML #css

Вопрос:

Я хотел бы иметь HTML-элемент, например таблицу с минимальной и максимальной шириной; Я думал, что смогу использовать следующие два атрибута в CSS:

 min-width
max-width

Я хочу, чтобы моя таблица имела минимальную ширину 1000 пикселей и максимальную ширину 1230 пикселей; в основном я хочу, чтобы она росла в зависимости от того, что находится в элементах таблицы TD. So,

 min-width: 1000px;
max-width: 1230px;

Будет ли это работать? Похоже, у меня это работает не так, как я хочу, поэтому я знаю, что чего-то не понимаю; в основном моя таблица всегда имеет размер 1000 пикселей, и она не будет расти, даже если я попытаюсь увеличить размер TD, придав ему большую ширину. Таблица в основном начинается так,

 <table style="min-width: 1000px;max-width: 1230px;">...

1. Это помогло бы, если бы вы создали jsfiddle. net для демонстрации проблемы

2. А также ссылку на версию вашего браузера.

3. Я не могу воспроизвести проблему, которую вы описываете jsbin.com/bovuvele/3/edit / jsbin.com/bovuvele/2/edit / jsbin.com/bovuvele/1/edit

4. Спасибо за примеры JS Bin; это показывает, что приведенные ниже ссылки неверны (в отношении того, что эти атрибуты не поддерживаются в таблице), и предполагает, что в моем фактическом коде есть некоторая синтаксическая ошибка.

Ответ №1:

Вам нужно добавить width:100% , чтобы таблица пыталась расти, чтобы соответствовать своему контейнеру, но была ограничена им max-width .

1. Это неправда. Ширина по умолчанию auto равна, какой (для display: table ) элемента будет как можно меньше при подгонке содержимого и соблюдении минимальной ширины. Как вы можете видеть, min-width отлично работает без указания ширины .

2. @Quentin Какая часть не соответствует действительности? min-width это не вопрос, мы говорим о max-width том, читаете ли вы вопрос. Таблица находится в фиксированном 1000px положении, то есть min-width . Он спрашивает, как заставить его расширяться, чтобы попасть в max-width . Я говорю ему, что ему нужно добавить width:100% для достижения этой цели.

3. Он пытается заставить его расширяться, имея большую td (не до максимальной ширины, если бы он хотел, чтобы она была максимальной ширины, он мог бы просто использовать ширину вместо максимальной ширины в первую очередь), и это делает: jsbin.com/bovuvele/2

4. @Quentin Он хочет таблицу, которая расширяется, но имеет размер от 1000 до 1230 пикселей. Он не может использовать width: 1230px для достижения этой цели; это привело бы к созданию таблицы, которая всегда была шириной 1230 пикселей, даже если окно было меньше этого.

5. @Quentin Как следует из моего ответа, я исправил ваш JSBin, просто добавив width: 100% : jsbin.com/bovuvele/4 .