IE 8 Thinks All Table Cells Have a Colspan

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