Сегодня столкнулся с проблемой переноса длинных слов в таблицах HTML.

Имеется следующая таблица:

<table>
    <tr>
        <td>
            короткое слово
        </td>
        <td style="width:200px;">длинноедлинноедлинноедлинноедлинноедлинноедлинноедлинноедлинноедлинноедлинноедлинноедлинноедлинноедлинноеслово
        </td>
        <td>
            короткое слово
        </td>
    </tr>
</table>

В одной из ячеек этой таблицы находится очень длинное слово. Ч­то длинное слово очень сильно увеличивает ширину ячейки. Из-за этого она смотрится совсем не красиво.

Уменьшить ширину ячейки не представляется возможным даже явно задав ширину для нее:

style="width:200px"

Каким же образом можно решить эту проблему?

Для этого нужно добавить следующие стили CSS:

table {
table-layout: fixed;
width:100%
}
td {
word-wrap:break-word;
}

После этого все будет отображаться так, как надо.

Вот живой пример:

Надеюсь, это поможет решить вашу проблему. Успехов.