Html table with width 100% does not work with long text

try the following:

<table style="word-break:break-all;" cellspacing="0" cellpadding="0" width="100%">
<tr>
    <td style="width:60px;">
        ...
    </td>
    <td>
        <div style="width:100%;overflow-x:hidden;">
            PROBLEMS ARE no longer HERE !
        </div>
    </td>
</tr>
...
</table>

There is a CSS3 property, word-wrap:break-word; that does exactly what you need. But unfortunately it doesn't work with table cells. I think you need to rethink your structure, opting for a table-less design.

I wrote this example for you

<style>
section { /* your table */
    display:block;
    width:300px;
    background-color:#aaf;
}
section:after {display:block; content:''; clear:left}

div { /* your cells */
    float:left;
    width:100px;
    background-color:#faa;
    word-wrap:break-word;
}
</style>

<section>
    <div>Content.</div>
    <div>Loooooooooooooooooooooooooooooooooooooooong cat.</div>
</section>

P.S: word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.

Set table-layout : fixed in your css or <table style='table-layout : fixed'> that oughta fix it.

Here is the code sample. Check it out.