Tim Huffam

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

  Home  |   Contact  |   Syndication    |   Login
  153 Posts | 0 Stories | 2747 Comments | 653 Trackbacks

News

Archives

Post Categories

Interesting Blogs/Links

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

Feedback

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

# It runs in each cell 1/24/2007 2:28 PM caos30
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;
}

# re: CSS nowrap alternative 2/15/2007 10:44 AM rfutami
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}

# re: CSS nowrap alternative 5/2/2007 7:00 PM Bill Meier
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?

# re: CSS nowrap alternative 5/17/2007 5:19 AM dizyart
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..


# re: CSS nowrap alternative 6/22/2007 11:54 PM Adam
To show of the ofshower:

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

# re: CSS nowrap alternative 11/21/2007 10:45 AM GregTheGeek
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)

# re: CSS nowrap alternative 11/21/2007 10:48 AM GregTheGeek
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>



# re: CSS nowrap alternative 12/17/2007 5:56 PM Jim Stanley
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?

# re: CSS nowrap alternative 12/23/2007 1:31 AM Mark
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.


# re: CSS nowrap alternative - IE issue 5/23/2008 7:39 PM narcis
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 !

# re: CSS nowrap alternative 6/10/2008 9:52 AM herenvardo
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

# re: CSS nowrap alternative 2/7/2009 12:57 AM Dave McGeown
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.

# re: CSS nowrap alternative 3/5/2009 6:39 AM RCDMK
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.

# re: CSS nowrap alternative 4/30/2009 7:59 AM jeanner
>>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; }

# re: CSS nowrap alternative 5/13/2009 6:36 PM mortoja
Can any one give an example with output


# re: CSS nowrap alternative 1/20/2010 9:25 AM hc
IE7: white-space:nowrap; works for me only after change " " to &nbsp;

# re: CSS nowrap alternative 5/4/2010 2:54 AM rt
thanks for help

# re: CSS nowrap alternative 6/15/2010 12:16 PM ikram
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.

# re: CSS nowrap alternative 6/29/2011 12:52 AM iulian
visit danube delta

# re: CSS nowrap alternative 7/19/2011 1:46 AM Saravanan B
CSS no wrap

css nowrap

# re: CSS nowrap alternative 12/18/2011 1:03 AM Vietnam Tour Packages
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.

# re: CSS nowrap alternative 3/20/2012 12:42 AM kerala
i want css nowarp class file

# re: CSS nowrap alternative 4/11/2012 5:29 AM Iain
Is there a css nowrap alternative for list items not in a table?

Post A Comment
Title:
Name:
Email:
Comment:
Verification: