Как указать в HTML или CSS абсолютную минимальную ширину ячейки таблицы

Question

Резюме

Как лучше всего обеспечить, чтобы ячейка таблицы не была меньше определенной минимальной ширины.

Пример

Я хочу убедиться, что все ячейки таблицы имеют ширину не менее 100 пикселей относительно ширины контейнера таблиц. Если места больше, ячейки таблицы должны заполнить это пространство.

Совместимость браузера

Возможно, я бы хотел найти решение, которое работает в

• IE 6-8
• FF 2-3
• Safari

В порядке предпочтения.

Answer 1

Этого CSS должно хватить:

td { min-width: 100px; }

Однако, это не всегда правильно выполняется (атрибут min-width) всеми браузерами (например, IE6 сильно его не любит).

Редактировать: Что касается решения IE6 (и ранее), то, насколько я знаю, не существует надежного решения при любых обстоятельствах. Использование HTML-атрибута nowrap на самом деле не приводит к желаемому результату, так как это просто предотвращает разрывы строк в ячейке, а не указывает минимальную ширину.

Однако, если nowrap используется в сочетании со стандартным свойством ширины ячейки (например, с использованием width: 100px), 100px будет действовать как минимальной ширины, и ячейка будет по-прежнему расширяться с текстом ( из-за Nowrap). Это не совсем идеальное решение, которое не может быть полностью применено с использованием CSS, и поэтому его было бы утомительно реализовать, если у вас есть много таблиц, к которым вы хотите применить это. (Конечно, все это альтернативное решение не работает, если вы хотите, чтобы в ваших ячейках были динамические разрывы строк).

Answer 2

Другой хак - это старый трюк с прозрачным пикселем 1x1. Вставьте прозрачное GIF-изображение 1x1 и установите его ширину в теге изображения на желаемую ширину. Это заставит ячейку быть по крайней мере такой же ширины, как изображение.

Answer 3

Я знаю, что это старый вопрос, но я подумал, что поделюсь тем, что не было упомянуто (хотя довольно просто в концепции ...), вы можете просто поместить <div> в таблицу (в один из <td> или что-то) и установите <div> в min-width. стол остановится на ширине <div>. Просто подумал, что я добавлю это там на случай, если кто-нибудь столкнется с этим в Google. Кроме того, я не уверен в том, как минимальная ширина обрабатывается в I.E6. но об этом уже говорилось в другом ответе.

Answer 4

У меня был некоторый успех с:

    min-width: 193px;
    width:auto !important; 
    _width: 193px;  /* IE6 hack */

На основе комбинации ответа Ватоса и статьи минимальной высоты здесь: http://www.dustindiaz.com/min-height-fast-hack/

Answer 5

Это кросс-браузерный способ установки минимальной ширины и / или минимальной высоты:

{
width (or height): auto !important;
width (or height): 200px;
min-width (or min-height): 200px;
}

IE 6 не понимает! Важный
IE 6 видит ширину / высоту: 200px (автоматическая перезапись)

Другие браузеры понимают минимальное и! Важное

Я не на 100% знаком с поведением ширины в элементах TD, но все это прекрасно работает, например, с тегами DIV

КСТАТИ:

На основании сочетания ответа Ватоса и статьи минимальной высоты здесь: http://www.dustindiaz.com/min-height-fast-hack/

Это не работает из-за порядка первых двух строк, они должны быть в правильном порядке (подумайте над вышесказанным);)

Answer 6

как насчет этого свойства CSS

min-width: 100px

но в IE6 он не работает, если не ошибаюсь

если вы не хотите делать это способом css, я думаю, вы можете добавить этот атрибут

nowrap="nowrap"

в табличном теге данных

Answer 7

IE6 обрабатывает ширину как минимальную ширину:

td {
    min-width: 100px;
    _width: 100px;/* IE6 hack */
}

Если вы хотите, чтобы IE6 обрабатывал ширину как обычные браузеры, задайте для него переполнение: visible; (здесь не тот случай)