Question

Screenshot

Important Note : This application does not support Internet Explorer. I will be happy with solution which will work in Chrome and Firefox.

I am using dynamic code (velocity-spring) for generating an html-table. Number of columns are not fixed (so I cannot specify width for headings). The second column values are always a link. Structure like this :

<table>
<tr>    
    <th ALIGN=CENTER> heading 1 </th>
    <th ALIGN=CENTER> heading 2 </th>
    ... ... .... .. .. .. 
    <th ALIGN=CENTER> heading n </th>
</tr>
<tr ALIGN=CENTER>    
    <td ALIGN=CENTER> value 1 </td>
    <td ALIGN=CENTER> <a href="mypage.html">value 2</a> </td> <!-- this column is a link -->
    ... ... .... .. .. .. 
    <td ALIGN=CENTER> value n </td>
</tr>
.... now more rows followed
</table>

Now problem is that if the second column (with hyperlink) contains a “loooooooooooooooooooooooong” value (without spaces) the other columns are wrapping their text. Please help me with css/jQuery/Javascript code, so that I maintain the structure of table with whatever values come from back-end.

UPDATE:

After getting answer, I updated my table code like below (as they say specify width and use word-break) :

<table>
<tr>    
    <th ALIGN=CENTER> heading 1 </th>
    <th style="word-wrap:break-word; width: 200px;" ALIGN=CENTER> heading 2 </th>
    ... ... .... .. .. .. 
    <th ALIGN=CENTER> heading n </th>
</tr>
<tr ALIGN=CENTER>    
    <td ALIGN=CENTER> value 1 </td>
    <td ALIGN=CENTER style="word-wrap:break-word; width: 200px;"> <a href="mypage.html">value 2</a> </td> <!-- this column is a link -->
    ... ... .... .. .. .. 
    <td ALIGN=CENTER> value n </td>
</tr>
.... now more rows followed
</table>

I know I need to accept and vote up usefull answers, doing. But please help me. I cant send you live URL. Attaching screen shots very soon.

Screenshot

Answer 1

word-wrap will work but you need to specify a width for the column.