Geeks With Blogs

Tim Huffam Dotting the I and crossing the T of I.T.

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

white-space: nowrap;
 
This style attribute only applies at the TD element level ie needs to be applied to each TD, ie not the the TR or TBODY.  If you're desparate to not apply it to each TD,  then you can get away with only applying it to the TD's of the first row - but this is only effective if applied to the cells containing thelongest data (so IMHO is a half-baked approach - ie don't do it).
 
HTH
Tim
Posted on Sunday, April 16, 2006 4:48 PM ASP.NET , PHP (incl PhpMyAdmin) , Web Development, JavaScript & CSS | Back to top


Comments on this post: CSS nowrap alternative

# re: CSS nowrap alternative
Requesting Gravatar...
"white-space:nowrap;" works fine.
Please note that replacing white spaces by "&nbsp;" does the job, too. "nbsp" means "Non Breakable SPace".
Left by Thomas Beaucourt on Jan 02, 2007 9:37 PM

# It runs in each cell
Requesting Gravatar...
Thanks Tim about your post.
But i've tried this writing this and works fine too, in every cell!!! ;o)

HTML----------------

<table>
<tr class=classtr>
<td>
bla bla bla...
</td>
<td>
bla bla bla...
</td>
</tr>
</table>

CSS-------------

.classtr td{
white-space:nowrap;
}
Left by caos30 on Jan 24, 2007 2:28 PM

# re: CSS nowrap alternative
Requesting Gravatar...
To apply this style to all td's in a table i would use inheritance. define a table id and set its td's to this style. This way you don't need to set the class of each td cell in a table
<table id="mytable">
<tr><td></td><td></td></tr>
</table>
table#mytable tr td{white-space:nowrap}
Left by rfutami on Feb 15, 2007 10:44 AM

# re: CSS nowrap alternative
Requesting Gravatar...
Note that replacing space with &nbsp; does NOT do the job, as the browser will wrap the text after other characters, such as a after a dash...

Yes, there is a non-breaking dash too, but how long do you want to fiddle with incomplete wordarounds?
Left by Bill Meier on May 02, 2007 7:00 PM

# re: CSS nowrap alternative
Requesting Gravatar...
Another alternative would be

<table>
<tr class="nowrap">
<td></td>
<td></td>
</tr>
</table>

CSS:

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


This way only the TD's inside a NOWRAP classed TR are no-wrap and also the TR itself is nowrap.
Although I can't find a reason why it whould be - just showing off, I guess..
Left by dizyart on May 17, 2007 5:19 AM

# re: CSS nowrap alternative
Requesting Gravatar...
To show of the ofshower:

CSS:
tr.nowrap td {white-space:nowrap;}
Left by Adam on Jun 22, 2007 11:54 PM

# re: CSS nowrap alternative
Requesting Gravatar...
To the one-upper of the &amp;quot;off-shower&amp;quot;:

CSS:
[code]
TR.nowrap TD, TH {white-space: nowrap;}
[/code]

This way, if you have a TH that is longer than your data, it does not wrap either.

If you're going to one-up someone else's code, make sure your spelling is dead on, too. :-) (just some light-hearted ribbing, not trying to start a flame war)
Left by GregTheGeek on Nov 21, 2007 10:45 AM

# re: CSS nowrap alternative
Requesting Gravatar...
Oh, nice. In the process of trying to post (and show off just a little) my quotes get messed up. <wipes the egg off his face>

Left by GregTheGeek on Nov 21, 2007 10:48 AM

# re: CSS nowrap alternative
Requesting Gravatar...
Looks good. Any advice on how to implement nowrap with a list item? I'm using a tree CSS I found on the internet, and whitespace:nowrap doesn't seem to work on ul or li.

Advice?
Left by Jim Stanley on Dec 17, 2007 5:56 PM

# re: CSS nowrap alternative
Requesting Gravatar...
Actually oneupmanship Greg, you're all wrong.

None of your TH elements will wrap.

What you meant to say, but failed to is:

TR.nowrap TD, TR.nowrap TH {white-space: nowrap;}

Before you engage in light-hearted ribbing (yeah, right), you ought to know what you're talking about.
Left by Mark on Dec 23, 2007 1:31 AM

# re: CSS nowrap alternative - IE issue
Requesting Gravatar...
I've used this rule for every TD that I needed and it worked fine on FireFox, but in IE the text is wrapped.

Do you know of this issue ? Is there a nice workaround for it ?

Thanks !
Left by narcis on May 23, 2008 7:39 PM

# re: CSS nowrap alternative
Requesting Gravatar...
Woops: part of the HTML I used in the example got parsed ^^; To be more exact, the example anchor tags are appearing as actual links (oh! and one of them even works LOL!) Fortunatelly, the <td> and <li> items are there, which are the important ones :P
Left by herenvardo on Jun 10, 2008 9:52 AM

# re: CSS nowrap alternative
Requesting Gravatar...
The &nbsp; was quite useful for me. In TD cells where you have a row of images it helps prevent them from wrapping when the table autosizes with the browser width.

If it's text, then the white-space:nowrap; solution will probably work better.
Left by Dave McGeown on Feb 07, 2009 12:57 AM

# re: CSS nowrap alternative
Requesting Gravatar...
I have a problem with a dinamic table populated by an asp loop.

I want the text to be displayed as one line and hide what pass through the cells width.

Some help please.
Left by RCDMK on Mar 05, 2009 6:39 AM

# re: CSS nowrap alternative
Requesting Gravatar...
>>on 12/17/2007 5:56 PM Jim Stanley wrote:
Any advice on how to implement nowrap with a list item? I'm using a tree CSS I found on the internet, and whitespace:nowrap doesn't seem to work on ul or li.<<

UL.nowrap LI {white-space:nowrap}

or

UL.nowrap LI {white-space:nowrap; overflow:hidden; }
Left by jeanner on Apr 30, 2009 7:59 AM

# re: CSS nowrap alternative
Requesting Gravatar...
Can any one give an example with output
Left by mortoja on May 13, 2009 6:36 PM

# re: CSS nowrap alternative
Requesting Gravatar...
IE7: white-space:nowrap; works for me only after change " " to &nbsp;
Left by hc on Jan 20, 2010 9:25 AM

# re: CSS nowrap alternative
Requesting Gravatar...
thanks for help
Left by rt on May 04, 2010 2:54 AM

# re: CSS nowrap alternative
Requesting Gravatar...
What on earth are you jaberring on about? I mean bloody hell it is all a bit technical isn't it? Why don't you let normal people understand what you are talking about? It's a conspiracy i just Know it i shall be reporting you to the high council immediately so just beware.
Left by ikram on Jun 15, 2010 12:16 PM

# re: CSS nowrap alternative
Requesting Gravatar...
visit danube delta
Left by iulian on Jun 29, 2011 12:52 AM

# re: CSS nowrap alternative
Requesting Gravatar...
CSS no wrap

css nowrap
Left by Saravanan B on Jul 19, 2011 1:46 AM

# re: CSS nowrap alternative
Requesting Gravatar...
Thanks for sharing this information. I really like your way of expressing the opinions and sharing the information. It is good to move as chance bring new things in life, paves the way for advancement, etc. But it is well known to everyone that moving to new location with bulk of goods is not an easy task to move or shift from one place to other place because I have experienced about that and I face the problem like that.
Left by Vietnam Tour Packages on Dec 18, 2011 1:03 AM

# re: CSS nowrap alternative
Requesting Gravatar...
i want css nowarp class file
Left by kerala on Mar 20, 2012 12:42 AM

# re: CSS nowrap alternative
Requesting Gravatar...
Is there a css nowrap alternative for list items not in a table?
Left by Iain on Apr 11, 2012 5:29 AM

Your comment:
 (will show your gravatar)


Copyright © Tim Huffam | Powered by: GeeksWithBlogs.net | Join free