min-width
Устанавливает минимальную ширину элемента. Если окно браузера по ширине становится меньше заданной минимальной ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки.
Значение ширины элемента будет вычисляться в зависимости от установленных значений свойств width , max-width и min-width . В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.
| Значения свойств | Ширина | ||||
|---|---|---|---|---|---|
| min-width | width | max-width | width | ||
| min-width | > | width | > | max-width | min-width |
| min-width | > | width | max-width | min-width | |
| min-width | width | width | |||
| min-width | > | width | min-width | ||
| min-width | > | max-width | min-width | ||
| min-width | max-width | max-width | |||
Данные из таблицы следует понимать следующим образом. Если значение ширины ( width ) меньше значения min-width , то ширина элемента принимается равной min-width .
Синтаксис
min-width: значение | проценты | inherit
Значения
В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются. inherit наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Результат использования min-width в браузере
Объектная модель
[window.]document.getElementById(» elementID «).style.minWidth Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
CSS make a table column be a minimum width
The following tutorial shows you how to use CSS to do «CSS make a table column be a minimum width».
CSS Style
The CSS style to do «CSS make a table column be a minimum width» is
table < >tr < >td < width:auto; border:1px solid #eee; > td.min < width:1%; white-space:nowrap; >
HTML Body
body> table> tbody> tr> td>Fills space td >"min">id td >"min">tiny td>Fills space td >"min">123 td >"min">small td>Fills space, wider td>Fills space td >"min">thin
The following iframe shows the result. You can view the full source code and open it in another tab.
html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> table !-- w w w . d e m o 2 s .c om --> > tr < >td < width: auto; border: 1px solid #eee; > td.min < width: 1%; white-space: nowrap; > body> table> tr> td>Fills space td >"min">id td >"min">tiny td>Fills space td >"min">123 td >"min">small td>Fills space, wider td>Fills space td >"min">thin Related
- CSS keep horizontal scroll bar only for One particular column in a table (Demo 3)
- CSS make a HTML table that has two rowspan column
- CSS make a space-keeping column use css and table tag
- CSS make a table column be a minimum width
- CSS make a table column widen when the sidebar ends
- CSS make a table in HTML with variable and fixed column widths and grouping header
- CSS make a table responsive? (stack columns)
demo2s.com | Email: | Demo Source and Support. All rights reserved.
min-width
Свойство CSS min-width устанавливает минимальную ширину элемента. Это предотвращает используется значение от width собственности становиться меньше , чем значение , заданное для min-width .
Try it
Ширина элемента устанавливается равной значению min-width всякий раз, когда min-width больше, чем max-width или width .
Syntax
/ * значение * / min-width: 3.5em; / * значение * / min-width: 10%; / * Значения ключевых слов * / min-width: max-content; min-width: min-content; min-width: fit-content(20em); / * Глобальные значения * / min-width: inherit; min-width: initial; min-width: revert; min-width: revert-layer; min-width: unset;
Values
Определяет min-width как абсолютное значение.
Определяет min-width в процентах от ширины содержащего блока.
Браузер рассчитает и выберет min-width для указанного элемента.
Внутренняя предпочтительная min-width .
Внутренняя минимальная min-width .
Использует формулу fit-content в которой доступное пространство заменяется указанным аргументом, например min(max-content, max(min-content, argument)) .
Formal definition
Initial value auto Applies to все элементы,кроме неперемещенных встроенных элементов,строк таблицы и групп строк. Inherited no Percentages относиться к ширине содержащего блока Computed value процентное соотношение или абсолютная длина Animation type длина , процент или calc ();
Formal syntax
min-width = auto | length-percentage [0,∞]> | min-content | max-content | fit-content( length-percentage [0,∞]> ) length-percentage> = length> | percentage>
Examples
Установка минимальной ширины элемента
table < min-width: 75%; > form < min-width: 0; >
Specifications
Browser compatibility
CSS 2.1 оставляет поведение min-width с table неопределенной. Firefox поддерживает применение min-width к элементам table .
CSS 2.1 оставляет поведение min-width с table неопределенной. Opera поддерживает применение min-width к элементам table .
CSS 2.1 оставляет поведение min-width с table неопределенной. Firefox поддерживает применение min-width к элементам table .
Firefox 18 и более поздние версии (до тех пор, пока значение не было удалено) использовали auto в качестве начального значения для min-width .
Firefox 18 и более поздние версии (до тех пор, пока значение не было удалено) использовали auto в качестве начального значения для min-width .
