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

Question

I have the following structure
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="width:60px;">
...
</td>
<td>
<div style="width:100%;overflow-x:hidden;">
PROBLEMS ARE HERE
</div>
</td>
</tr>
...
</table>
The first td takes 60px, the second one takes the rest of the 100%, but when I have some long text with no spaces and no dashes the table becomes larger then the 100%.
How to display the non-breakable text in one line or on multiple lines (both ways are acceptable) and keep the table on 100% of the screen?
I've tried to fix this with overflow-hidden but it has no effect.
Here's a screenshot of the problem:link

Answer 1

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.

Answer 2

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>

Answer 3

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.