IE 8 Thinks All Table Cells Have a Colspan

Avatar of Chris Coyier
Chris Coyier on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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 */
}