Internet Explorer (IE) ignores white-space: nowrap on table’s TD
January 15, 2008 at 10:41 am 47 comments
Used gridview today and client wanted content in tables to be displayed without any wrapping. First solution of course just set up:
<table><tr><td style=”white-space: nowrap”>qwe-asd</td></tr></table>
And of course it works fine both in Opera and FireFox but not in IE7 (have not tested under IE6). The picture changes of course but some cells are still wrapping.
Workaround is to use template field with span:
<table><tr><td><span style=”white-space: nowrap”>qwe-asd</span></td></tr></table>
Like this:
Entry filed under: Uncategorized. Tags: css, ie, workaround.
1.
Ben | February 15, 2008 at 7:11 am
Thanks! This was handy.
2.
Prashant | March 26, 2008 at 10:18 pm
Thanks a lot!
3.
Def | May 25, 2008 at 11:24 pm
Thanks SO much!
4.
Masum | June 7, 2008 at 9:20 am
This is great
5.
Nabab | June 17, 2008 at 1:04 am
Thanks a million, you saved me time!!
6.
Alberto Sh | September 2, 2008 at 8:26 pm
Thanks man!!! you rule!
7.
isandu | September 5, 2008 at 5:23 pm
Another woraround is to specify the width of the TD element using a percentage value:
qwe-asd
It doesn’t seem to work any other way (try witdh: 100px, it won’t work), except by using a wrapper for the contents of the cell, like you proposed. IE must die!
8.
mehrad1362 | March 16, 2012 at 8:29 am
You rock man … Seriously you do …
I didn’t want to go over my code and put ugly s for every single TD of my table …
Thanks heaps …
9.
Lidia | September 18, 2008 at 12:56 am
you’re a genius!!! the best for today this article!! Thanks a lots
10.
University of Iowa Developer | September 29, 2008 at 9:05 pm
Genius!
11.
ivanopalas | October 17, 2008 at 3:47 pm
Thanks
12.
Nikola | October 17, 2008 at 8:05 pm
you could have used the percentage for the td width and that will work. I have changed the size from 44px, to 8% on the width property in the TD and worked perfectly fine.
13.
Shobhit | December 22, 2008 at 9:21 am
Nice Hack…
)
solved my problem
14.
rzezeski | January 7, 2009 at 8:38 pm
Just wanted to mention this doesn’t seem to work for IE6. I tried putting in in the element, putting the text in a span element with the nowrap style, using the nowrap attribute of , tried using , and finally the only thing that worked was using a non-breaking space (ie. “ ”).
15.
rzezeski | January 7, 2009 at 8:41 pm
Crap, all my html just got garbled on my last post. Basically I tried
1) span using no-wrap style
2) no-wrap style directly in th tag
3) no-wrap attribute of th tag
4) nobr tag
5) nbsp
The only thing that worked for IE6 was number 5. For Safari and Firefox I just used straight CSS.
16.
Maxim | March 11, 2009 at 1:43 am
Thank you so much!
17.
Unter | March 21, 2009 at 2:57 pm
Big Thanx – i crush my head on this problem )) Заеб…ся мучаться – а тут за секунду все решилось – большое спасибо
18.
Ahmed Charolia | March 27, 2009 at 7:45 pm
Thanks alot… Saved my hours
19.
HugoGomes | May 22, 2009 at 3:58 pm
Well, if you encountered this problem in IE7, just like I did, you probably have a css attached with the attribute “width:auto”. Having this attribute on that cell automatically takes precedence any wrap attributes added to the cell, and yes Gramotei´s solution would work due to the fact that the span would disregard the cells css attributes…removing the width attribute and adding “white-space:nowrap;” would also work fine, tested successfully various diferent ways, another way it would work would be in the code, adding Cell.Attributes.Add(“nowrap”,”false”); , also would work, of course with no css attached…
20.
Nitesh | July 15, 2009 at 7:57 am
Thank you.
You save my hours!
21.
Demetrius | August 7, 2009 at 3:30 pm
could also use:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
…
e.Row.Cells[index].Wrap = false;
…
}
22.
Demetrius | August 7, 2009 at 3:37 pm
I dont know why i posted that without checking IE first since that is what this discussion is about. I figured if Microsoft provided via Intellisense a Cells.Wrap property then their own browser would support the markup it creates. I just found out that the mark up it created includes adding “white-space: nowrap;” which we all know doesnt work.
Oh well.
23.
Babak | August 13, 2009 at 8:12 am
Thanks a bunch, solved my problem
24.
iesux | August 20, 2009 at 10:01 pm
Thank you – worked like a charm!!!
25.
ellipsis | August 26, 2009 at 11:07 am
Such an elegant solution… I’m jealous I didn’t think of it
. Thanks!
26. links for 2009-12-10 - Craig's Blog | December 10, 2009 at 8:07 pm
[...] for 2009-12-10 Internet Explorer (IE) ignores white-space: nowrap on table’s TD « Gramotei’s Weblog Another reason IE should just be abandoned.. PO – unholy – S (tags: ie bugs) Published Thu, [...]
27.
Anon | December 31, 2009 at 10:17 pm
Thanks !! I spent almost the whole day figuring this out !!
28.
Jasmine | January 25, 2010 at 7:58 pm
Worked like Charm..thanks alot
29.
Matt | February 5, 2010 at 2:48 am
Thanks for posting this, great stuff.
30.
Tom | February 24, 2010 at 6:31 pm
There’s a better way.
Create a “dummy” row, with height 0, and specify column widths ONLY on the cells of this row. The cells can be empty. Make white-space: nowrap; a property of all td elements.
The consequence for a table of x cells * y rows is x*y fewer redundant span elements in the DOM.
31.
Denis | February 27, 2010 at 1:20 am
Thank you million times! Simple and genious. You saved me a lot of time!
32.
ashar zaman | March 17, 2010 at 6:06 pm
Thanks, it helped immensely
33.
aquaone | March 31, 2010 at 9:41 pm
I was stuck trying to figure this out myself for 2 hours today. Thank you for posting this.
34.
mezich | April 8, 2010 at 3:35 pm
it will work when using “white-space:pre”
tested in IE6 strict mode
35.
Paresh | May 1, 2010 at 6:07 am
There is another bug that IE6 has. IE ignores colspan set at TD level. To Fix this you could use style=”width: auto;” This solved the problem of text getting wrapped in my case.
36.
Apache | August 26, 2010 at 10:31 pm
I worked around this by placing a 1×1 pixel white dot in the empty cell and scaling it with the width parameter to force the empty cell to the proper size.
37.
Atanu | September 15, 2010 at 12:08 pm
Thanks a lot man…
38.
Golden eagle | November 20, 2010 at 1:29 am
I think your problem and many of the comments is you forgot the semicolon after the nowrap “;”
39.
Huan | February 10, 2011 at 7:25 am
thanks very much
40.
Nikki | March 22, 2011 at 7:51 pm
Thanks so much! This was driving me bonkers.
41.
omerbonfil | June 7, 2011 at 10:44 am
thank you!
42.
John | July 15, 2011 at 2:41 pm
Thanks a lot it was really helpful
43.
flashflex | July 19, 2011 at 8:54 am
Thanks for CSS nowrap html
CSS nowrap
44.
Tatsh (@Tatsh) | October 10, 2011 at 8:36 pm
Thanks
45.
anon | November 7, 2011 at 9:45 pm
Great! it works perfectly
46.
a web developer | November 25, 2011 at 2:49 pm
awesome !
47.
Pavel | December 21, 2011 at 4:12 pm
Great! Thank you very much!