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

Я создаю журналы приложений в 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, чтобы не увеличивать последний столбец таблицы, а вместо этого позволять текст span несколько строк. В моем предыдущем примере Firefox печатает

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

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

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

Ответ 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;
}

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

.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;
}