Tuesday, November 25, 2014

HTML TD Can't Wrap text , grows with the size of line and mess up the witdh of the TD



I am using Internet Explorer 9.

A dynamicaly generated text having a very long line when displayed in a TD in my HTML table mess up the whole width of the TD which basically grows to fit the whole line and doesn't automaticaly wrap text

applying wrap text CSS on TD is not working , The solution was to apply the below style at table level

style="width: 100%; table-layout: fixed;"

I didn't even need to apply text wraping to my TDs.




Below Thread was very helpfull

http://stackoverflow.com/questions/1057574/html-td-wrap-text

and the solution which worked for me in this thread is copy pasted below

table-layout:fixed will resolve the expanding cell problem, but will create a new one. IE by default will hide the overflow but Mozilla will render it outside the box.
Another solution would be to use: overflow:hidden;width:?px
<table style="table-layout:fixed; width:100px">
 <tr>
   <td style="overflow:hidden; width:50px;">fearofthedarkihaveaconstantfearofadark</td>
   <td>
     test
   </td>
 </tr>
</table>
 
Since I am using IE I had to only use
 
style="width: 100%; table-layout: fixed;"
 
for my table.