Grow your CSS skills. Land your dream job.

IE 8 Thinks All Table Cells Have a Colspan

Published by Chris Coyier

Nathan Smith let me know about this little gem. IE 8 (only) thinks that all table cells have a colspan attribute, whether they do or not. So if you are looking to style table cells uniquely that have that attribute, it's a bit tough.

td[colspan],
th[colspan] {
   /* WARNING: this will apply in IE 8 to table cells
      even if they don't have a colspan */
   background: red;
}

What we would expect to happen is something like this:

Instead in IE 8, every single table cell is matched:

This is totally unique to IE 8. Neither 7 or 9 does this, and 6 doesn't support attribute selectors so that's out anyway. It also thinks the value of the colspan is 1, so all of these are out:

th[colspan],
th[colspan="1"],
th[colspan*="1"],
th[colspan^="1"],
th[colspan$="1"],
td[colspan],
td[colspan="1"],
td[colspan*="1"],
td[colspan^="1"],
td[colspan$="1"] {
  
	/* All problematic in IE 8 */ 

}

Solution

If you really need to make this selector work, you can instead select by colspan values that are anything except for the value of 1. A little verbose, but it works.

th[colspan*="0"],
th[colspan*="2"],
th[colspan*="3"],
th[colspan*="4"],
th[colspan*="5"],
th[colspan*="6"],
th[colspan*="7"],
th[colspan*="8"],
th[colspan*="9"],
th[colspan*="11"] {
  /* Styles */
}

td[colspan*="0"],
td[colspan*="2"],
td[colspan*="3"],
td[colspan*="4"],
td[colspan*="5"],
td[colspan*="6"],
td[colspan*="7"],
td[colspan*="8"],
td[colspan*="9"],
td[colspan*="11"] {
  /* Styles */
}

Comments

  1. Charming. I actually wrote some code at work for an internal tool which used [colspan] a couple of weeks ago. I would have spotted this myself if I’d ever viewed the output in IE (and IE8 is what I have on that machine). But I get to use Firefox, and fortunately the HTML files I produce don’t need to target IE (yay!).

  2. Chris
    Permalink to comment#

    Could you not apply the style to all td/th elements and then reverse it for the single colspan items?

    E.g.
    td, th { background-color: red; }
    td[colspan=1], th[colspan=1] { background-color: white; }

    Chris

    • That’s exactly what my first thought was. And it works.

    • Actually, I was thinking something slightly different. That example would produce unpleasant results for other browsers.

      You would want to define the “default” rule to include just the td/th selectors as well (for non-IE8 browsers where you haven’t specified colspan).
      E.g.
      td[colspan],
      th[colspan] {
      background: red;
      }
      td,
      td[colspan="1"],
      th,
      th[colspan="1"] {
      background: #fff;
      }

      Also, you might serve the latter rules via conditional comment to IE8 only.

  3. Permalink to comment#

    No should be using IE no matter the version.

    • Yawn. That’s such an old argument. People used that argument about other browsers when IE6 first came out.

      Use any browser – but use the latest version.

  4. Rahul
    Permalink to comment#

    Well, even when I am a beginner, the most difficult thing I’ve felt during writing down the CSS is making it work in IE and all others. IE just won’t cooperate. IE’s saying like “I am totally different from others. I do it my way…” .

    • Tommy
      Permalink to comment#

      keep in mind, if it wasn’t for IE and all it’s headaches, CEO’s and housewives would be littering the web with Front Page WYSIWYG crap (much like 15 years ago). I’m good with IE bugs and that’s part of the reason I have my job. THANK YOU MS!

  5. What are they smoking over at MS?

  6. cnwtx
    Permalink to comment#

    Smoking AND Drinking, I might add.

  7. Looks a good place to put modernizr to use, no?

    You’d still have to write all that extra IE8 targeted nonsens but at least you could keep it separate from the nice, normal stuff.

    Though I suppose it would add a bit of extra markup adding .ie8 before all of those selectors….

  8. Abdulrahman
    Permalink to comment#

    I just learn something new :)
    Thank you so much!

  9. Anton
    Permalink to comment#

    IE7 have the same bug

    • In my testing it does not.

    • Anton
      Permalink to comment#

      Right! I have tested it on Windows 7 IE9 by switching modes :)

    • Permalink to comment#

      maybe you should try testing it in an actual copy of IE7.

      IE7 (standards mode): works (only colspan th’s, td’s are red)
      IE7 (quirks mode): doesn’t work (_NO_ th’s, td’s are red)

  10. Interesting! The IE is working hard to live up to his reputation :)

  11. hater
    Permalink to comment#

    yes, that’s totally because

    IE IS SHITT AND SHOULD BE DESTROYED!!!!

    why, I mean, WHY does ANYONE use that obsolete-upon-delivery browser??? WTF people WAKE UP!

    • Because there are a whole bunch of advantages for sysadmins. The main reason for them is to make sure they don’t break any of their companies internal web applications. They don’t care about the newest HTML5 features, but they do care about headaches when destroying millions worth applications when a browser like Firefox automatically updates and breaks their application.

  12. The IE is working hard to live up his reputation..

  13. Want a good EQ test? Administer IE.

  14. Great exploit. However, I like to just skip IE8 altogether. <meta http-equiv=”X-UA-Compatible” content=”IE=7, IE=edge” /> I know I’ll lose my gold star for validation, but IE6 & IE7 can be addressed with one legacy stylesheet ( typically). Moving on to modern browsers…

  15. cnwtx
    Permalink to comment#

    colspan=”0″ ? What would you do with a colspan value of zilch?

    • Permalink to comment#

      IE (7, not tested on others yet) shows the cell anyway, and does _not_ apply the background.

      Fx and Chrome show the cell also, and _does_ apply the background.

    • cnwtx
      Permalink to comment#

      Well, yes, but are there any actual reasons a developer would use colspan=”0″?

    • Permalink to comment#

      other than as a workaround for this specific bug?
      I can’t think of one. : )

  16. Permalink to comment#

    IE or another word for it is internet exploder. Mark this as another IE fail

  17. deos
    Permalink to comment#

    if IE8 would support :not it would be easy to go around this
    td[colspan]:not([colspan="1"])
    but well, just another IE bug, like maaaany others…

  18. Geez will them guys at MS ever bring out a “modern” browser that works. Sigh …

  19. IE9 is quite lovely as modern browser, when compared to lte IE 8.

  20. As much as IE browser compatibility gives me headaches, their is a simple solution to this post… Stop using tables!!

  21. Interesting post.Nice tutorial one and works properly with all browsers.

    Thanks a lot.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".