Веб-браузеры, игнорирующие свойство max-width в процентах для ячеек таблицы

Question

Почему веб-браузеры игнорируют свойство max-width в процентах и ​​применяют свойство max-width в px для ячеек таблицы?

Например:

<td style="max-width:10%;word-wrap:break-word;">veryLongTextWithoutSpace</td>

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

Но

<td style="max-width=60px;word-wrap:break-word;">veryLongTextWithoutSpace</td>

будет применено, а содержимое ячейки таблицы будет перенесено.

UPD: подробнее о моем случае и table-layout: fixed

table-layout: fixed с набором ширины для заголовка таблицы (теги th) это действительно хорошо решение . Но, к сожалению, мой случай сумасшедший.

Таблица генерируется с помощью пользовательского тега (использует технику jsp), и я не могу установить стиль для заголовка таблицы (th теги), но я могу установить стиль для каждой строки и столбца.

В результате table-layout: fixed устанавливает все столбцы одинаковой ширины.

Полный пример: http://jsfiddle.net/h3cxc/1/ (без table-layout:fixed)

http://jsfiddle.net/h3cxc/ (с table-layout:fixed)

Есть идеи, как решить эту проблему (максимальная ширина в процентах)?

Answer 1

Ваш второй пример содержит опечатку / ошибку и не может работать, поскольку вы используете = вместо:.

В ответ на вопрос:

Добавьте table-layout:fixed к вашему table.

При таком (быстром) алгоритме горизонтальное расположение таблицы не зависит от содержимого ячеек;это зависит только от ширины таблицы, ширины столбцов, а также границ или расстояния между ячейками.

http://www.w3.org/TR/CSS2/tables.html#propdef-table-layout

Проверьте образец: http://jsfiddle.net/easwee/UuVq6/9/