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.