CSS: установить максимальную ширину таблицы

Question

Я генерирую журналы приложений в формате html и наткнулся на довольно раздражающую проблему.У меня есть следующий макет:

| Action | Result | File path           |

Например,

| Copy | Success | C:\VeryVeryVeryLongF |
|      |         | ileName.txt          |

В столбцах 1 и 2 отображаются только короткие метки: их содержимое должно оставаться на одной строке.С другой стороны, столбец 3 может содержать очень длинные пути к файлам, которые должны занимать несколько строк, если они не помещаются на одной строке.

Для этого я использовал white-space: nowrap; в первойстолбцы и white-space: normal; word-break: break-all; на последнем.Кроме того, в таблице есть width:100%.

Это прекрасно работает в Chrome и IE, но не в Firefox: Короче говоря, я не могу найти способ сказать Firefox 8.0 не увеличиватьпоследний столбец таблицы, и вместо этого пусть текст занимает несколько строк .В моем предыдущем примере Firefox печатает

| Copy | Success | C:\VeryVeryVeryLongFileName.txt |

Текст в первых двух столбцах может отличаться, поэтому я не могу установить их ширину вручную и использовать table-layout: fixed.Я также попытался установить max-width на столе и обернуть его в div, но безрезультатно.

См. http://jsfiddle.net/GQsFx/6/ для реального примера =) Как я могузаставить Firefox вести себя как Chrome?

Answer 1

Будет ли это работать? Это похоже на работу с jsfiddle. Процент на основе первых двух столбцов, затем ширины автоматически третьего, с макетом таблицы: фиксировано на столе.

http://jsfiddle.net/keithwyland/uuF9k/1/

.actions {
  width:100%;
  table-layout: fixed;
}

.actions tr td {
  white-space: nowrap;
  width: 15%;
}

.actions tr td:nth-child(3) {
  white-space: normal;   
  word-break: break-all;
  word-wrap: break-word;
  width: auto;
}

Answer 2

Кажется, что следующий CSS помогает мне работать.Обратите внимание на добавление макета таблицы: исправлено и использование переноса слов: слово-разрыв.

.actions {
    width:100%;
    table-layout:fixed;
}

.actions tr td {
    white-space: nowrap;
}

.actions tr td:nth-child(3) {
    white-space:normal;
    word-wrap: break-word;
}

Answer 3

это должно работать:

    .actions tr td:nth-child(3) {
         white-space: normal;
         word-break: break-all;
         max-width:200px;
     }

Answer 4

Попробуйте поставить width: auto;.Это скажет браузеру использовать необходимое пространство ...

Answer 5

max-width является допустимым CSS2, но поддерживается только в NS7, Opera 7 и, возможно, Mozilla.Я не верю, что это поддерживается в IE 6.

Answer 6

используйте эту CSS

.actions {
width:100%;
}
.actions tr td:nth-child(3) {
 width:200px;
 word-wrap:break-word;
  display:inline-block;
}