Wednesday, 13 July 2011

Setting "nowrap" using CSS white-space property

To achieve the same results as a TD nowrap (<td nowrap="true">) using cascading style sheets, use the following:

white-space: nowrap;

white-space
The white-space property specifies how white-space inside an element is handled.

Property values
normal, nowrap, pre, pre-line, pre-wrap, inherit

JavaScript syntax: object.style.whiteSpace="nowrap"

Please note that replacing white spaces by " " does the job, too. "nbsp" means "Non Breakable SPace".

Sample code

Example 1.
<table id="mytable">
<tr><td></td><td></td></tr>
</table>

CSS

table#mytable tr td{white-space:nowrap;}

Example 2.
<table>
<tr class="nowrap">
<td></td>
<td></td>
</tr>
</table>

CSS:

tr.nowrap { white-space:nowrap; }

td { white-space:inherit; }

OR

tr.nowrap td {white-space:nowrap;}

2 comments:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a .Net developer learn from Dot Net Training in Chennai. or learn thru Dot Net Training in Chennai. Nowadays Dot Net has tons of job opportunities on various vertical industry.
    or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete