Какой лучший способ обеспечить ячейку таблицы не может быть меньше определенной минимальной ширины.
Я хочу, чтобы все ячейки в таблице имели ширину ширины контейнера таблиц шириной не менее 100 пикселей. Если доступно больше свободного места, ячейки таблицы должны заполнять это пространство.
Возможно я хотел бы найти решение, которое работает в
В порядке предпочтения.
Этот CSS должен быть достаточным:
td { min-width: 100px; }
Однако он не всегда корректно соблюдает (атрибут min-width) всеми браузерами (например, IE6 им не нравится).
Изменить: Что касается решения IE6 (и раньше), то, насколько мне известно, никто не работает надежно при любых обстоятельствах. Использование атрибута nowrap HTML на самом деле не обеспечивает желаемого результата, поскольку это просто предотвращает разрывы строк в ячейке, а не указывает минимальную ширину.
Однако, если nowrap используется в сочетании с обычным ячеистым значением ширины (например, с использованием width: 100px), 100px будет действовать как минимальная ширина, и ячейка все равно будет расширяться с текстом (из-за nowrap). Это решение, отличное от идеала, которое не может быть полностью применено с помощью CSS и, как таковое, было бы утомительным для реализации, если у вас много таблиц, к которым вы хотите применить это. (Конечно, все это альтернативное решение падает, если вы хотите иметь динамические перерывы в ячейках в любом случае).
Другим хаком является старый прозрачный пиксельный трюк 1x1. Вставьте прозрачное изображение gif 1x1 и установите его ширину в теге изображения по желаемой ширине. Это заставит ячейку быть как минимум шириной, чем изображение.
Я знаю, что это старый вопрос, но я думал, что поделюсь тем, о чем не упоминалось (хотя это довольно просто в концепции..) вы можете просто положить <div> внутри таблицы (в одном из <td> или что-то еще) и установите для параметра <div> значение min-width. таблица остановится на ширине <div>. Просто подумал, что я брошу это там, если кто-то встретит это на google. Кроме того, я не настолько уверен в том, как обрабатывается min-width в I.E6. но это уже было рассмотрено в другом ответе.
У меня был успех:
min-width: 193px;
width:auto !important;
_width: 193px; /* IE6 hack */
На основе сочетания ответа Ватоса и статьи минимальной высоты здесь: http://www.dustindiaz.com/min-height-fast-hack/
как насчет этого свойства css
min-width: 100px
но он не работает в IE6, если не ошибается
если вы не хотите делать это в режиме css, я полагаю, вы можете добавить этот атрибут
nowrap="nowrap"
в теге данных таблицы
Это кросс-браузерный способ установки минимальной ширины и/или минимальной высоты:
{
width (or height): auto !important;
width (or height): 200px;
min-width (or min-height): 200px;
}
IE 6 не понимает! важно
IE 6 видит ширину/высоту: 200 пикселей (переписывание авто)
Другие браузеры понимают минимальные и важные!
Я не на 100% знаком с поведением ширины в элементах TD, но все это прекрасно работает, например, в тегах DIV
BTW:
Основываясь на комбинации ответа Ватоса и статьи минимальной высоты здесь: http://www.dustindiaz.com/min-height-fast-hack/
Это не работает из-за порядка первых двух строк, они должны быть в правильном порядке (подумайте об этом);)
IE6 обрабатывает ширину как минимальную ширину:
td {
min-width: 100px;
_width: 100px;/* IE6 hack */
}
Если вы хотите, чтобы IE6 обрабатывал ширину, как обычные браузеры, дайте ей переполнение: visible; (не здесь)