I try to create a table in a Joomla content page but i find that the text will expand the table if it is too long.
The following style can solve the problem.
<style type="text/css"> td { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } </style>
The above style will wrap the text in all the <td> tags of a HTML table with style=”table-layout:fixed” as well as defined width in <td> tag.
Unfortunately, The doesn’t work well in Joomla because it will also override the <td> tags of the Joomla content page which leads to the distortion of the layout.
So i have to add the style in each <td> tags just like the below HTML table.
<table width="520" style="table-layout:fixed"> <tr> <td valign="top" width="140">First Name:</td> <td valign="top" width="380" style="white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word">Ying Kit</td> </tr> <tr> <td valign="top" width="140">Last Name:</td> <td valign="top" width="380" style="white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word">Yuen</td> </tr> </table>
Done =)
Reference: Peter Bromberg;s Unblog – FIREFOX / IE Word-Wrap, Word-Break, TABLES FIX
this is what i am looking for.
Thank you very much. It works!!!
LikeLiked by 1 person
Good to know that it helps =)
LikeLike
hey thanks buddy this is what i was looking 4!!!!!!!1
LikeLike
you are welcome =)
LikeLike
Hi,
I am using af:table (adf component to create a table). I want to wrap text in column (the text populated from database and hence dynamic).
I tried the same as you mentioned above however that didnt work for me.
any help.
LikeLike
Hi Manglesh,
i have no idea on that. see if the following article help
ADF Faces Rich Client
Regards,
Kit
LikeLike
Thank you so much for this, really helped…
LikeLike
you are welcome. =)
LikeLike
hi buddy this is working fine .thanks .
LikeLike
great =)
LikeLike
Hello,
My requirement: TD width is % based and not fixed. TD height if 20px and should increase by 20 whenever text wrap happens.
Problem: Since the width is dynamic, the word-wrap: break-word doesnt work. If I use the table-layout:fixed, the height of the TD doesnt increase when the wrap happens.
Please suggest a solution so that the height should increase to accomodate a newline when text wrap happens.
LikeLike
could you add padding to the HTML element inside TD?
I think there is no way to change a hardcoded height of a TD tag when a text wrap happens.
I hope i didn’t mis-interpret your requirement, if i did, i hope you could post an example here so that i could try it by myself.
Kit
LikeLike
Thanks it worked.
LikeLike
good to know that it works. =)
LikeLike
I just registered to say thank you!!! That little piece of css is what had been keeping me busy for 3 days.
LikeLike
You are welcome. =)
LikeLike
Thank you for you code! it’s been a great help to my project! great work! 🙂
LikeLike
Thanks for your comment and good to know that it helps~
LikeLike
Hi am using Extreme components(ec) table. I want to wrap text in column (the text populated from database and hence dynamic).
I tried your solution. but it didn’t work for me.. Can you help me please..
LikeLike
i didn’t try that before, do you have any url which has the extreme components table?
LikeLike
it worked for me great..thanks a lot
LikeLike