Internet Explorer (IE) ignores white-space: nowrap on table’s TD
January 15, 2008
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>
Entry Filed under: Uncategorized. Tags: css, ie, workaround.
24 Comments Add your own
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed
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.
Lidia | September 18, 2008 at 12:56 am
you’re a genius!!! the best for today this article!! Thanks a lots
9.
University of Iowa Developer | September 29, 2008 at 9:05 pm
Genius!
10.
ivanopalas | October 17, 2008 at 3:47 pm
Thanks
11.
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.
12.
Shobhit | December 22, 2008 at 9:21 am
Nice Hack…
)
solved my problem
13.
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. “ ”).
14.
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.
15.
Maxim | March 11, 2009 at 1:43 am
Thank you so much!
16.
Unter | March 21, 2009 at 2:57 pm
Big Thanx – i crush my head on this problem )) Заеб…ся мучаться – а тут за секунду все решилось – большое спасибо
17.
Ahmed Charolia | March 27, 2009 at 7:45 pm
Thanks alot… Saved my hours
18.
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…
19.
Nitesh | July 15, 2009 at 7:57 am
Thank you.
You save my hours!
20.
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;
…
}
21.
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.
22.
Babak | August 13, 2009 at 8:12 am
Thanks a bunch, solved my problem
23.
iesux | August 20, 2009 at 10:01 pm
Thank you – worked like a charm!!!
24.
ellipsis | August 26, 2009 at 11:07 am
Such an elegant solution… I’m jealous I didn’t think of it
. Thanks!