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

StackOverflow https://stackoverflow.com/questions/56658

  •  09-06-2019
  •  | 
  •  

Вопрос

Краткое содержание

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

Пример

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

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

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

  • ИЕ 6-8
  • ФФ 2-3
  • Сафари

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

Это было полезно?

Решение

Этого CSS должно быть достаточно:

td { min-width: 100px; }

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

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

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

Другие советы

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

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

Другие браузеры понимают мин- и !important.

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

КСТАТИ:

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top