Internet Explorer (IE) ignores white-space: nowrap on table’s TD

January 15, 2008 at 10:41 am 67 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>

Entry filed under: Uncategorized. Tags: css, ie, workaround.

Code Coverage with TestDriven.Net in Visual Studio 2003 CentOS 5, PHP, GD2 library

67 Comments Add your own

1. Ben | February 15, 2008 at 7:11 am

Thanks! This was handy.
Reply
2. Prashant | March 26, 2008 at 10:18 pm

Thanks a lot!
Reply
3. Def | May 25, 2008 at 11:24 pm

Thanks SO much!
Reply
4. Masum | June 7, 2008 at 9:20 am

This is great
Reply
5. Nabab | June 17, 2008 at 1:04 am

Thanks a million, you saved me time!!
Reply
6. Alberto Sh | September 2, 2008 at 8:26 pm

Thanks man!!! you rule!
Reply
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!
Reply
- 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 …
  Reply
9. Lidia | September 18, 2008 at 12:56 am

you’re a genius!!! the best for today this article!! Thanks a lots
Reply
10. University of Iowa Developer | September 29, 2008 at 9:05 pm

Genius!
Reply
11. ivanopalas | October 17, 2008 at 3:47 pm

Thanks
Reply
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.
Reply
13. Shobhit | December 22, 2008 at 9:21 am

Nice Hack…
solved my problem :))
Reply
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. ” “).
Reply
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.
Reply
16. Maxim | March 11, 2009 at 1:43 am

Thank you so much!
Reply
17. Unter | March 21, 2009 at 2:57 pm

Big Thanx – i crush my head on this problem )) Заеб…ся мучаться – а тут за секунду все решилось – большое спасибо
Reply
18. Ahmed Charolia | March 27, 2009 at 7:45 pm

Thanks alot… Saved my hours
Reply
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…
Reply
20. Nitesh | July 15, 2009 at 7:57 am

Thank you.
You save my hours!
Reply
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;

…
}
Reply
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.
Reply
23. Babak | August 13, 2009 at 8:12 am

Thanks a bunch, solved my problem 🙂
Reply
24. iesux | August 20, 2009 at 10:01 pm

Thank you – worked like a charm!!!
Reply
25. ellipsis | August 26, 2009 at 11:07 am

Such an elegant solution… I’m jealous I didn’t think of it :). Thanks!
Reply
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, […]
Reply
27. Anon | December 31, 2009 at 10:17 pm

Thanks !! I spent almost the whole day figuring this out !!
Reply
28. Jasmine | January 25, 2010 at 7:58 pm

Worked like Charm..thanks alot
Reply
29. Matt | February 5, 2010 at 2:48 am

Thanks for posting this, great stuff.
Reply
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.
Reply
31. Denis | February 27, 2010 at 1:20 am

Thank you million times! Simple and genious. You saved me a lot of time!
Reply
32. ashar zaman | March 17, 2010 at 6:06 pm

Thanks, it helped immensely
Reply
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.
Reply
34. mezich | April 8, 2010 at 3:35 pm

it will work when using “white-space:pre”
tested in IE6 strict mode
Reply
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.
Reply
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.
Reply
37. Atanu | September 15, 2010 at 12:08 pm

Thanks a lot man…
Reply
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 “;”
Reply
39. Huan | February 10, 2011 at 7:25 am

thanks very much
Reply
40. Nikki | March 22, 2011 at 7:51 pm

Thanks so much! This was driving me bonkers.
Reply
41. omerbonfil | June 7, 2011 at 10:44 am

thank you!
Reply
42. John | July 15, 2011 at 2:41 pm

Thanks a lot it was really helpful
Reply
43. flashflex | July 19, 2011 at 8:54 am

Thanks for CSS nowrap html

CSS nowrap
Reply
44. Tatsh (@Tatsh) | October 10, 2011 at 8:36 pm

Thanks
Reply
45. anon | November 7, 2011 at 9:45 pm

Great! it works perfectly
Reply
46. a web developer | November 25, 2011 at 2:49 pm

awesome !
Reply
47. Pavel | December 21, 2011 at 4:12 pm

Great! Thank you very much!
Reply
48. web worker | May 30, 2012 at 1:45 pm

4 Years later, the bug in IE isnt fixed… thanks for the code
Reply
49. http://fiberscouponcode.wordpress.com/ | June 17, 2013 at 8:50 am

Hi, There’s no doubt that your web site might be having web browser compatibility problems. Whenever I look at your blog in Safari, it looks fine however, when opening in IE, it has some overlapping issues. I merely wanted to provide you with a quick heads up! Besides that, fantastic site!
Reply
50. ussalonsupplycouponcodes.wordpress.com | June 23, 2013 at 7:11 am

I visited several blogs however the audio feature for audio songs present at this site is truly marvelous.
Reply
51. elektronik sigara | June 24, 2013 at 1:06 pm

Hello! I simply want to offer you a huge thumbs up for your
excellent info you’ve got here on this post. I will be returning to your site for more soon.
Reply
52. sites.google.com | June 24, 2013 at 9:30 pm

I don’t even know how I ended up here, but I thought this post was great. I don’t know who
you are but certainly you’re going to a famous blogger if you aren’t already 😉 Cheers!
Reply
53. Total Beauty Coupon Code | July 4, 2013 at 10:25 pm

Currently it looks like BlogEngine is the top blogging
platform available right now. (from what I’ve read) Is that what you’re using on your blog?
Reply
54. Ellen Lange Coupon Code | July 18, 2013 at 12:31 pm

Great beat ! I would like to apprentice whilst you amend your web site,
how can i subscribe for a weblog website? The account helped me a appropriate deal.
I had been tiny bit familiar of this your broadcast offered bright clear concept
Reply
55. Gotobaby Coupon Code | July 20, 2013 at 3:56 pm

Unquestionably consider that that you said. Your favourite reason seemed to be
on the internet the simplest thing to consider of. I say to you, I definitely get irked even as other folks consider issues that they just do not recognize about.
You controlled to hit the nail upon the highest and outlined out the whole thing without having side-effects , folks could
take a signal. Will likely be again to get more. Thank you
Reply
56. Geraldo | July 21, 2013 at 8:48 am

I like the valuable information you provide to
your articles. I will bookmark your weblog and test once more right
here frequently. I am rather sure I will be told
plenty of new stuff proper right here! Good luck
for the next!
Reply
57. www.slideshare.net | July 27, 2013 at 1:10 am

This article will assist the internet viewers for creating new webpage or even a
weblog from start to end.
Reply
58. Won Ji Ko | November 25, 2013 at 8:00 am

Just awsome… You saved my day.
Reply
59. Quiksilver discount code | June 1, 2014 at 2:01 am

These are in fact fantastic ideas in about
blogging. You have touched some pleasant things here.
Any way keep up wrinting.
Reply
60. Van Mildert discount code | June 3, 2014 at 5:20 am

I really like it when individuals come together and share views.
Great website, keep it up!
Reply
61. mark. Coupon Code | June 12, 2014 at 10:44 am

Oh my goodness! Amazing article dude! Thank you so much,
However I am experiencing problems with your RSS. I don’t understand
the reason why I am unable to subscribe to it.

Is there anyone else getting identical RSS problems?
Anyone who knows the solution can you kindly respond? Thanks!!
Reply
62. Chemist Discount Code | June 20, 2014 at 7:30 am

I every time spent my half an hour to read this web site’s articles every day along with a cup of coffee.
Reply
63. Afterglow cosmetics coupon code | June 20, 2014 at 8:54 pm

Amazing issues here. I am very satisfied to peer your post.
Thank you a lot and I am having a look ahead to touch you.
Will you please drop me a mail?
Reply
64. car accident lawyer | March 17, 2017 at 5:37 am

I think you have a lot of knowledge in thus subjject and you
really know your stuff.
Reply
65. LastJanell | January 4, 2018 at 9:12 pm

I see you don’t monetize your page, don’t waste your traffic, you can earn additional bucks every month because you’ve
got hi quality content. If you want to know how to make extra money,
search for: Mertiso’s tips best adsense alternative
Reply
66. BestHalina | August 19, 2018 at 2:30 pm

I see you don’t monetize your website, don’t waste your traffic, you can earn additional cash every month.
You can use the best adsense alternative for any type of website (they approve all websites), for more details simply search in gooogle:
boorfe’s tips monetize your website
Reply
67. Constantine | December 31, 2018 at 2:22 pm

Awesome! thanks!!
inside TD element worked for IE! Also works in Chrome.
Reply