Блог

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

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

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

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

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

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

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

К вопросу:

Добавьте table-layout:fixed в свой table .

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

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

Проверьте пример: http://jsfiddle.net/easwee/UuVq6/9 /