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;}

1 comment: